JavaScript開發指南:jS事件基礎應用

JavaScript開發指南:jS事件基礎應用,下拉菜單。

這裡寫圖片描述

<!--簡單的設置瞭樣式,方便起見,將style和script寫到同一個文檔,著重練習事件基礎-->
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
        *{
            margin:0;
            padding:0;
        }
            ul {
                list-style: none;
            }
            body{
                margin:20px auto;
            }
            .ul>li {
                float: left;
                width:150px;
                height:35px;
                line-height:35px;
                background:mediumaquamarine;
                position:relative;
            }
            #nav p{
                background:bisque;
                position:absolute;
                left:0px;
                top:35px;
                width:150px;
                display:none;

            }
        </style>
    </head>

    <body>
        <p id="nav">
            <ul class="ul">

                <li onmouseo/" target="_blank">seover="show('p1')" onmouseout="hide('p1')">下拉菜單
                    <p id="p1">
                        <p>下拉菜單</p>
                        <p>下拉菜單</p>
                        <p>下拉菜單</p>
                        <p>下拉菜單</p>
                        <p>下拉菜單</p>
                    </p>
                </li>

                <li onmouseover="show('p2')" onmouseout="hide('p2')">下拉菜單
                    <p id="p2">
                        <p>下拉菜單</p>
                        <p>下拉菜單</p>
                        <p>下拉菜單</p>
                        <p>下拉菜單</p>
                        <p>下拉菜單</p>
                    </p>
                </li>
                <li onmouseover="show('p3')" onmouseout="hide('p3')">下拉菜單
                    <p id="p3">
                        <p>下拉菜單</p>
                        <p>下拉菜單</p>
                        <p>下拉菜單</p>
                        <p>下拉菜單</p>
                        <p>下拉菜單</p>
                    </p>
                </li>
                <li onmouseover="show('p4')"  onmouseout="hide('p4')">下拉菜單
                    <p id="p4">
                        <p>下拉菜單</p>
                        <p>下拉菜單</p>
                        <p>下拉菜單</p>
                        <p>下拉菜單</p>
                        <p>下拉菜單</p>
                    </p>
                </li>

            </ul>
        </p>
        <script>
            function show(id){
                document.getElementById(id).style.display="block";
            }
            function hide(id){
                document.getElementById(id).style.display="none";
            }
        </script>
    </body>

</html>

表格隨機轉換

這裡寫圖片描述

<!--style樣式可隨己自行設置-->
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>表格隨機轉換</title>
        <style>
            * {
                padding: 0px;
                margin: 0px;
            }

            td {
                width: 100px;
                height: 30px;
                border: 1px solid darkblue;
            }
        </style>
    </head>

    <body>

        <table>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
        <script>
            var str = ["coral", "chartreuse", "cornflowerblue", "aqua", "antiquewhite", "purple", "white", "black"];
            window.onload = function() {
                var tr = document.getElementsByTagName("td");
                var colo = parseInt(Math.random() * str.length);
                for(var i = 1; i < tr.length; i++) {
                    if(i % 2 != 0) {
                        tr[i].style.background = str[colo];
                    } else {
                        var colo = parseInt(Math.random() * str.length);
                        tr[i].style.background = str[colo];
                    }
                }
                for(var i = 0; i < tr.length; i++) {
                    tr[i].onmouseover = function() {
                        bgc = this.style.background;
                        this.style.background ="green";
                    }
                }
                for(var i = 0; i < tr.length; i++) {
                    tr[i].onmouseout = function() {
                        this.style.background = bgc;
                    }
                }
            }
        </script>
    </body>

</html>

咨詢緩慢彈框

這裡寫圖片描述

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>     
            * {
                padding: 0;
                margin: 0;
            }

            #box {
                width: 500px;
                height: 300px;
                position: fixed;
                right: 0;
                background: pink;
            }

            #box h2 {
                height: 50px;
                line-height: 50px;
                position: relative;
                background: darkturquoise;
            }

            #box h2 p {
                width:50px;
                height:50px;
                position: absolute;
                right: 0;
                top: 0;
            }
            textarea{
                margin:2px 40px 0;
            }
            input{
                width:100px;
                height:50px;
                color:#000;
                font-weight:bold;
                margin:0 0 0 250px;
                background:yellow;
            }
        </style>
    </head>

    <body>
        <p id="box">
            <h2>請咨詢<p onclick="mp()">×</p></h2>
            <textarea cols="30px" rows="7px">
            </textarea>
            <input type="button" value="提交">

        </p>
        <script>
            var v;
            var t;
            var add = -300;
            window.onload = function() {
                v = document.getElementById("box");
                t = setInterval("ups()", 10);
            }
            function ups() {
                add += 3;
                v.style.bottom = add + "px";
                if(parseInt(v.style.bottom) >= 0) {
                    clearInterval(t);
                }
            }
            function mp(){
                v.style.display="none";
            }
        </script>
    </body>

</html>

鼠標經過改變圖片路徑

這裡寫圖片描述

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>car鼠標經過改變圖片路徑</title>
        <style>
            #box img {
                width: 300px;
                height: 300px;
            }

            img {
                width: 50px;
                height: 50px;
            }
        </style>
    </head>

    <body>
        <p id="box">
            <img id="imgb" src="img/1.png">
        </p>

        <img src="img/1.png" onmouseover="f(1)"/>
        <img src="img/2.png" onmouseover="f(2)" />
        <img src="img/3.png" onmouseover="f(3)" />

        <script>
            function f(n) {
                var mg = document.getElementById("imgb");
                mg.src = "img/" + n + ".png";
            }
        </script>
    </body>

</html>

樹形菜單

這裡寫圖片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>樹形菜單</title>
        <style>
            * {
                padding: 0px;
                margin: 0px;
            }
            body {
                width: 450px;
                margin: 0 auto;
            }
            .mybox {
                padding: 0 0 0 25px;
                border: 2px solid yellow;
            }
            h2 {
                width: 400px;
                height: 50px;
                line-height: 50px;
                background: pink;
            }
            span {
                float: left;
                margin: 0 10px 0;
            }
            .box {
                width: 400px;
                height: 300px;
                background: greenyellow;
                display: none;
            }
        </style>
    </head>

    <body>
        <p class="mybox">
            <h2 onclick="fun(0)"><span class="mspan">+</span>我是主體欄目</h2>
            <p class="box">
            </p>
            <h2 onclick="fun(1)"><span class="mspan">+</span>我是主體欄目</h2>
            <p class="box">
            </p>
            <h2 onclick="fun(2)"><span class="mspan">+</span>我是主體欄目</h2>
            <p class="box">
            </p>
        </p>

        <script>
            function fun(n) {
                var box = document.getElementsByClassName("box");
                var mspan = document.getElementsByClassName("mspan");
                if(box[n].style.display == "none") {
                    box[n].style.display = "block";
                    mspan[n].innerHTML="-"
                } else {
                    box[n].style.display = "none";
                    mspan[n].innerHTML="+"
                }
            }
        </script>

    </body>
</html>

隔5秒跳轉頁面

這裡寫圖片描述

<!--秒數可更改-->
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>隔五秒跳轉頁面</title>
    </head>

    <body>
        <p id="mp">5秒後跳轉新頁面
        </p>
        <script>
            var i = 5;
            var t;
            window.onload = function() {
             t = setInterval("fun()", 1000);
            }

            function fun() {
                document.getElementById("mp").innerHTML = (i--) + "秒後跳轉新頁面";
                if(i == 0) {
                    clearInterval(t);
                    location.href="hello.html";
                }
            }
        </script>
    </body>

</html>

文字域輸入字數控制

這裡寫圖片描述

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>文字域輸入字數控制</title>
    </head>

    <body>
        <textarea name="" id="conte" cols="30" rows="10" onkeyup="fun()"></textarea>
        <span id="count">還能輸入10個字</span>
        <script>
            function fun(){
                var t = document.getElementById("conte").value.length;
                document.getElementById("count").innerHTML="還能輸入"+(11-t)+"個字";
                document.getElementById("conte").value=document.getElementById("conte").value.substr(0,10);
            }
        </script>

    </body>

</html>

文字無縫滾動,鼠標放上去停止

這裡寫圖片描述

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <style>
            * {
                padding: 0;
                margin: 0;
            }

            #box {
                height: 50px;
                overflow-y: hidden;
            }
        </style>
        <!--跑馬燈-->
        <!--<marquee direction="up">
            adfasdfasdf
            adfasdfasdf
            </marquee>-->
        <p id="box" onmouseover="stp()" onmouseout="beg()">
            <ol id="ol1">
                <li>1文字無縫滾動</li>
                <li>2文字無縫滾動</li>
                <li>3文字無縫滾動</li>
                <li>4文字無縫滾動</li>
                <li>5文字無縫滾動</li>
                <li>6文字無縫滾動</li>
                <li>7文字無縫滾動</li>
            </ol>
            <ol id="ol2"></ol>

        </p>

        <script>
            t = setInterval("myScroll()", 100);
            var box = document.getElementById("box");
            var ol1 = document.getElementById("ol1");
            var ol2 = document.getElementById("ol2");
            ol2.innerHTML = ol1.innerHTML;

            function myScroll() {
                if(box.scrollTop <= ol1.offsetHeight) {
                    box.scrollTop++;
                } else {
                    box.scrollTop = 0;
                }
            }
            function stp() {
                clearInterval(t);
            }

            function beg() {
                t = setInterval("myScroll()", 100);
            }
        </script>
    </body>

</html>

這裡寫圖片描述

<!--顏色內容自行更改-->
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            * {
                padding: 0px;
                margin: 0px;
            }

            li {
                list-style: none;
                float: left;
                height: 35px;
                width: 100px;
                text-align:center;
                line-height: 35px;
                background: mediumaquamarine;
            }
            li:hover{
                background:bisque;
            }
            #box p {
                clear: both;
                height: 200px;
                width: 400px;
                background: bisque;
                display: none;
            }
        </style>
    </head>

    <body>
        <p id="tab">
            <ul>
                <li onmouseover="showDiv(0)">nav_1</li>
                <li onmouseover="showDiv(1)">nav_2</li>
                <li onmouseover="showDiv(2)">nav_3</li>
                <li onmouseover="showDiv(3)">nav_3</li>
            </ul>
        </p>

        <p id="box">
            <p>box_1</p>
            <p>box_2</p>
            <p>box_3</p>
            <p>box_4</p>
        </p>

        <script>

            function showDiv(n) {
                var dv = document.getElementById("box").getElementsByTagName("p");
                for(var j = 0; j < dv.length; j++) {
                    dv[j].style.display = "none";
                }
                dv[n].style.display = "block";

                if(n % 2 == 0) {
                    dv[n].style.background = "##FFE4C4";
                }
            }

        </script>
    </body>

</html>

對聯廣告
可回頂部, 點×進行關閉

這裡寫圖片描述

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body {
                height: 2000px
            }

            #box {
                width: 200px;
                height: 250px;
                background: pink;
                /*  position:fixed;
                top:10px;
                left:20px;
                */
                position: absolute;
                top: 30px;
                left: 20px;
            }

            span {
                position: absolute;
                right: 0px;
                bottom: 0px;
            }
            #box1{
                position: fixed;
                right: 2px;
                bottom: 3px;
                color:#fff;
                background:mediumaquamarine;
            }
        </style>

    </head>

    <body>
        <p>頂部頂部頂部</p>
        <p id="box">
            <span onclick="cs()">×</span>
        </p>
        <p id="box1" onclick="totop()">
            回頂部
        </p>
        <script>
        function funn(){
            history.back(1);
        }
            //          window.onunload = function() {
            //              alert(document.getEl/**/ementById("box").innerHTML);
            //              window.open("文字無縫滾動.html", "", "widht=200,height=200")
            //          }

            window.onscroll = function() {
                var th = document.body.scrollTop || document.documentElement.scrollTop;
                document.getElementById("box").style.top = th + 30 + "px";
            }
            function cs() {
                document.getElementById("box").style.display = "none";
            }
            function totop(){
                document.body.scrollTop =0; 
                document.documentElement.scrollTop=0;
            }
            /*window.onresize=function(){
                alert("alkert");
            }*/
        </script>
    </body>

</html>

漂浮廣告
這裡寫圖片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <style>
            #box{
                background:bisque;
                position:absolute;
                left:0;
                top:0
            }
        </style>
        <p  id="box" onmouseover="stop()" onmouseout="m()">
            <span onclick="clo()">×</span>
            <!--<img src="img/5.jpg" width="150px", height="150"/>-->
        </p>

        <script>
            window.onload=function(){
                t = setInterval("move()",20);
            }
            function m(){
                clearInterval(t);
                t = setInterval("move()",20);
            }
            var x =0;
            var y = 0;
            var step = 3;
            var stepy=4;
            function move(){
                document.getElementById("box").style.left=x+"px";
                document.getElementById("box").style.top=y+"px";

                var wx = document.documentElement.clientWidth;
                var wy = document.documentElement.clientHeight;
                var bow =parseInt(document.getElementById("box").style.width);
                var boh =parseInt(document.getElementById("box").style.height);
                x+=step;
                y+=stepy;
                if(x>=(wx-bow)||x<0){
                    step*=-1;
                }
                if(y>=(wy-boh)||y<0){
                    stepy*=-1;
                }
                console.log(y);
            }           
            function stop(){
                clearInterval(t);
            }
            function clo(){
                var b=document.getElementById("box");
                b.style.display="none";
            }
        </script>
    </body>
</html>

打字效果

這裡寫圖片描述

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>打字效果</title>
    </head>

    <body>
        <p id="myp"></p>
        <script>
            var str = "我是一隻小小";
            var i = 1;
            window.onload = function() {
                setInterval("wrDiv()",200);
            }
            function wrDiv(){
                    document.getElementById("myp").innerHTML=str.substr(0,i);
                    i++;
                    if(i>str.length){
                        i=0;
                    }
            }

        </script>
    </body>

</html>

倒計時

這裡寫圖片描述

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>倒計時</title>
        <style>
            input[type=button]:hover{
                outline:none;
                background:mediumaquamarine;
            }
        </style>
    </head>

    <body>
        <p>輸入一個分鐘數,進行倒計時</p>
        <input type="number" id="num" />秒<br/>
        <input type="button" value="開始" onclick="bg()" />
        <input type="button" value="暫停" onclick="stop()" /><br/><br/><br/>

        <input type="number" id="second" />分鐘<br/>
        <input type="text" id="no" /><br/>秒
        <input type="button" value="開始" onclick="nobg()" />
        <input type="button" value="暫停" onclick="nostop()" />

        <br/><br/><br/>
        <p id="myp">time</p>
        <input type="button" value="開始" onclick="mystart()" />
        <input type="button" value="暫停" onclick="mystop()" />

        <script>
        //------------------------------------------------------------
            var n;
            var m;
            var t;
            function bg() {
                m = document.getElementById("num");
                n = m.value;
                t = setInterval("jsq()", 1000);
            }

            function stop() {
                clearInterval(t);
            }

            function jsq() {
                --n;
                m.value = n;
                if(n <= 0) {
                    stop();
                    m.value = "";
                }
            }
            //------------------------------------------------------------
            var notime;
            var second;
            var no;
            function nobg() {
                second = document.getElementById("second").value*60;
                no = document.getElementById("no");
                notime = setInterval("nojsq()", 1000);
            }
            function nostop() {
                clearInterval(notime);
            }
            function nojsq() {
                --second;
                no.value = second;
                if(second <= 0) {
                    nostop();
                    no.value = "";
                }
            }
            //------------------------------------------------------------
            var mm;
            var s;
             var tt;
            function mystart(){
                tt = setInterval("ms()",1000);
            }
            function ms(){
                mm = document.getElementById("myp");
                var s = new Date();
                var y = s.getHours()+":"+s.getMinutes()+":"+s.getSeconds();
                mm.innerHTML=y;
            }
            function mystop(){
                clearInterval(tt);
            }

        </script>
    </body>

</html>

定時廣告

這裡寫圖片描述

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <style>
            * {
                padding: 0;
                margin: 0;
            }

            body {
                width: 1000px;
                height: 1000px;
                margin: 0 auto;
            }

            #g {
                margin: 0 auto;
                margin: 400px auto 0;
                background: mediumaquamarine;
                width: 300px;
                height: 100px;
                position: relative;
            }

            #mp {
                position: absolute;
                right: 0px;
                bottom: 0px;
                background:bisque;
                font-size: 20px;
            }
        </style>

        <p id="g">
            <p id="mp" onclick="mp()">×</p>
        </p>

        <script>
        var t ;
            function mp() {
                var n = document.getElementById("g");
                n.style.display = "none";
                clearInterval(t);
                 t = setInterval("view()",1000)
            }
            function view(){
                var n = document.getElementById("g");
                n.style.display = "block";
            }
        </script>
    </body>

</html>

進度條

這裡寫圖片描述

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>進度條</title>
    </head>

    <body>
        <style>
            #p1 {
                height: 30px;
                width: 300px;
                background: #000;
            }

            #myp {
                height: 30px;
                width: 10px;
                background:pink;
            }
            input[type=button]:hover{
                background:mediumaquamarine;
            }
        </style>
        <p id="p1">
            <p id="myp">

            </p>
        </p>
        <input type="button" onclick="fun()" value="開始" />
        <p id="mp"></p>
        <script>
            var i = 10;
            var t;

            function fun() {
                t = setInterval("jdt()", 100);
                if(i ==300) {
                    clearInterval(t);
                }
            }

            function jdt() {
                var d = document.getElementById("myp");
                d.style.width = i + 10 + "px";
                i += 10;
                document.getElementById("mp").innerHTML = i + "%";
                if(i ==300) {
                    clearInterval(t);
                }
            }
        </script>
    </body>

</html>

圖片輪播
這裡寫圖片描述

<!--圖片自行設置-->
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <style>
            #box {
                width: 600px;
                height: 220px;
                position: relative;
            }

            ul {
                position: absolute;
                top: 500px;
                left: 30px;
            }

            img {
                width: 400px;
                height: 600px;
            }

            li {
                width: 20px;
                height: 20px;
                display: inline-block;
                list-style: none;
                text-align: center;
                color: #fff;
                background: #f00;
                border-radius: 50%;
                font-weight: bold;
            }

            .over {
                background: deepskyblue;
            }
        </style>
        <p id="box">
            <img src="img/1.jpg" id="img" />
            <ul>
                <li class="over" onmouseover="show(0)" onmouseout="go()">1</li>
                <!--默認第一張賦值顏色-->
                <li onmouseover="show(1)" onmouseout="go()">2</li>
                <li onmouseover="show(2)" onmouseout="go()">3</li>
                <li onmouseover="show(3)" onmouseout="go()">4</li>
                <li onmouseover="show(4)" onmouseout="go()">5</li>
            </ul>
        </p>
        <script>
            var t = setInterval("imgL()", 1000);
            var arr = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg"];
            var n = 1;
            var list;

            function imgL() {
                document.getElementById("img").src = arr[n];
                list = document.getElementsByTagName("li");
                for(var i = 0; i < list.length; i++) {
                    list[i].className = "";
                }
                list[n].className = "over";
                n++;
                if(n >= arr.length) {
                    n = 0;
                }
            }

            function show(v) {
                clearInterval(t);
                document.getElementById("img").src = arr[v];
                for(var i = 0; i < list.length; i++) {
                    list[i].className = "";
                }
                list[v].className = "over";
                n = v;
                if(v==4){
                    n = 0;
                }else{
                    n = v+1;
                }
            }
            function go() {
                t = setInterval("imgL()", 1000);
            }
        </script>
    </body>

</html>

發佈留言