h5~js~定时器

Posted tigercnblog

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了h5~js~定时器相关的知识,希望对你有一定的参考价值。

定时器

定时器两种讲解

1.setTimeout表示多少号秒之后执行函数,此函数只执行一次setTimeout(“fun()”,5000)

2.setInterval表示每隔多少毫秒执行一次,setInterval(fun(),1000)一定要注意两者之间的区别,setTimeout当然也可执行多次定时,需要将函数循环重复执行

3.如果需要取消定时器      两种定时器方法是一样的 如Interval  设置一个变量        =setInterval(fun,1000),然后使用clearInterval(变量)

示例如下:

setTimeOut示例:

<!DOCTYPE html>

<html>

    <head>

       <meta charset="UTF-8">

       <title>定时器的使用</title>

    </head>

    <body>

       <input type="button" onclick="count()" value="开始">

       <input type="button" onclick="start()" value="计时器开始">

       <input type="button" onclick="stop()" value="停止计时">

       <div id="content"><img src="../img/01.jpg" width="30%" height="30%"></div>

       <div id="num"></div>

      

           function count(){

              //设置3秒后执行代码

              //setTimeout("alert(‘时间到了‘)",3000);

              //设置5秒之后图片消失

                setTimeout("hide();",5000);

           }

           function hide(){

              document.getElementById("content").innerHTML="";

           }

           //全局变量

           var cou=0;

           var t1=null;

           function start(){

              cou=cou+1;

              document.getElementById("num").innerHTML="计数:"+cou;

              t1=setTimeout("start();",1000);//1000毫秒以后再次调用自己

           }

           function stop(){

              clearTimeout(t1);

           }

      

    </body>

</html>

 定时跳转

<!DOCTYPE html>

<html>

    <head>

       <meta charset="UTF-8">

       <title>定时跳转</title>

    </head>

    <body>

       <h1 id="h">

      

           var mowh = document.getElementById("h");

           var num=10;

       setTimeout(change,1000);

           function change(){

              if(num>0)

              {

                  num--;

                  mowh.innerHTML="抢红包倒计时:"+num;

                  setTimeout(change,1000);

              }else{

                  location.href="http://www.jd.com";

              }

           }

             

      

    </body>

</html>

 

                             

SetInterval定时器

示例1:

<!DOCTYPE html>

<html>

    <head>

       <meta charset="UTF-8">

       <title>实现一个计数器</title>

    </head>

    <body>

         <input type="button" onclick="start();" value="开始计数" >

        <input type="button" onclick="stop();" value="停止计数">

        <h1 id="tt">

           

           

           

                var count=0;

                var task1=0;

                function start(){

                   //每隔1000毫秒来执行1次startCount

                   task1=setInterval(startCount,1000);

                  

                }

                function startCount(){

                   count++;

                   document.getElementById("tt").innerHTML="计数:"+count;

                }

                function stop(){

                   clearInterval(task1);

                }

           

    </body>

</html>

示例2:

<!DOCTYPE html>

<html>

    <!--定时器有两种

1.setTimeout 表示多少毫秒之后执行函数,此函数只执行一次 setTimeout("fun();",5000)

2.setIntervaj 表示每隔多少毫秒执行函数 setInterval(fun,1000) 一定要注意两种方法里面的函数表达形式

setTimeout当然也可以执行多次定时,需要将函数循环重复执行

3.如果需要取消定时器

两种定时器方法是一样的 如Interval  设置一个变量=setInterval(fun,1000)

然后使用clearInterval(变量)-->

    <head>

       <meta charset="UTF-8">

       <title>setInterval定时器</title>

      

         #rack{

               width:200px;

               height:100px;

               position: absolute;

               top:100px;

               border:1px solid paleturquoise;

               background:orange;

           }

        

    </head>

    <body>

    <!--   下面是一个通过setInterval实现div不断从左向右移动的实例:-->

            <input type="button" value="点击开始" onclick="start()">

            <input type="button" value="结束" onclick="end();" />

            <div id="rack"></div>

       

        // var ra = document.getElementById("rack");

          // var x= ra.style.left;

         // var exe;

                var x=0;

               var exe =null;

               function start(){

                 

                    exe=setInterval(move,1000);

                   

               }

               function move(){

             /*  x=eval(x+100); */  //eval函数自动计算

                  //ra.style.left = x + "px";

                 x=x+20;

               var ra = document.getElementById("rack");

              ra.style.left = x + "px";

                   

               }

               function end(){

                clearInterval(exe);

                document.getElementById("rack").style.display="none";

               }

           

           

           

           <!--

            var num=0;

                function start(){

                   /*var str = document.getElementById("rack");*/

                   var str = setInterval(count,1000);

                }

                function count(){

                   num++;

                   document.getElementById("rack").innerHTML="计数:"+num;

                }

                function end(){

                clearInterval(str);

                }

            -->

    </body>

</html>

实例三:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>会动的div</title>

  

   *{

   margin:0px;

   padding:0px;

   }

       #aa{

       width:200px;

       height:200px;

       background: blue;

           position: absolute;

       top:200px;

       left: 10px;

       }

        #bb{

       width:200px;

       height:200px;

       background: blue;

       position: absolute;

       top:200px;

       right:10px;

       }

  

</head>

<body>

<div id="aa">

   

我是程龙,我要飞飞

 

</div>

<div id="bb">

   

我是程龙,我也要飞飞

 

</div>

 

     var x=0;

    setInterval(function(){

    x=x+1;

    var str=document.getElementById("aa");

    str.style.left= x +"px";

    },30);

    setInterval(function(){

    x=x+1;

    var str=document.getElementById("bb");

    str.style.right= x +"px";

    },30);

   

   

 

</body>

</html>

多级菜单:

示例四:多级菜单

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>多级菜单</title>

   

        body{

            margin:0;

            padding:0;

        }

        #images{

            position: absolute;

            width: 100%;

            margin-top:110px;

 

        }

        #img{

            width: 1000px;

            position: relative;

            left:50%;

            margin-left:-500px;

            -webkit-box-shadow: 0 0 8px rgba(0,0,0,0.6);

        }

        #number{

            width: 200px;

            position: absolute;

            left:800px;

            top:190px;

            z-index: 10;

        }

        #middle{

            width: 1000px;

            position: relative;

            left:50%;

            margin-left:-505px;

        }

   

</head>

<body>

        <div id="images">

            <div id="middle">

            <div id="number">

 

            </div>

            <img src="../img/1.jpg" id="img">

            </div>

        </div>

 

    var img = document.getElementById("img");

    var sum = 0;

    var src = ["../img/01.jpg","../img/02.jpg","../img/03.jpg","../img/04.jpg","../img/05.jpg","../img/06.jpg"];

    var t = "";

    function change(){

        sum = (sum+1)%6;

        img.src = src[sum];

        var everdiv = number.getElementsByTagName("div");

        for(var m=0;m<everdiv.length;m++){

        for(var n=0;n<everdiv.length;n++){

            everdiv[n].style.backgroundColor = "rgba(0,0,0,0.7)";

            everdiv[sum].style.opacity = "0";

        }

        everdiv[sum].style.backgroundColor = "black";

            everdiv[sum].style.opacity = "1";

        }

    }

    t = setInterval(change,2000);

    var number = document.getElementById("number");

    var figure = ["1","2","3","4","5","6"];

    for(var n=0;n<figure.length;n++){

        var newdiv = document.createElement("div");

        number.appendChild(newdiv);

        newdiv.style.height = "25px";

        newdiv.style.color = "white";

        newdiv.style.paddingLeft = "20px";

        newdiv.style.marginTop = "5px";

        newdiv.style.lineHeight = "25px";

        newdiv.style.backgroundColor = "rgba(0,0,0,0.7)";

        newdiv.innerText = figure[n];

    }

    var everdiv = number.getElementsByTagName("div");

    everdiv[0].style.backgroundColor = "black";

    for(var n=0;n<everdiv.length;n++){

        everdiv[n].onmouseover = function(){

            clearInterval(t);

            for(var i=0;i<everdiv.length;i++){

                everdiv[i].style.backgroundColor = "rgba(0,0,0,0.7)";

            }

            this.style.backgroundColor = "black";

            for(var m=0;m<everdiv.length;m++){

                if(everdiv[m].style.backgroundColor == "black"){

                    sum = m;

                    geted(sum);

                }

            }

        }

        everdiv[n].onmouseout = function(){

            t = setInterval(change,2000);

        }

    }

    function geted(sum) {

        var src = ["../img/01.jpg","../img/02.jpg","../img/03.jpg","../img/04.jpg","../img/05.jpg","../img/06.jpg"];

        img.src = src[sum];

    }

    var thisimg = document.getElementById("img");

    thisimg.onmouseover = function(){

        clearInterval(t);

    }

    thisimg.onmouseout = function(){

        t = setInterval(change,2000);

    }

 

</body>

</html>

 

 

 

    var img = document.getElementById("img");

    var sum = 0;

    var src = ["../img/01.jpg","../img/02.jpg","../img/03.jpg","../img/04.jpg","../img/05.jpg","../img/06.jpg"];

    var t = "";

    function change(){

        sum = (sum+1)%6;

        img.src = src[sum];

        var everdiv = number.getElementsByTagName("div");

        for(var m=0;m<everdiv.length;m++){

        for(var n=0;n<everdiv.length;n++){

            everdiv[n].style.backgroundColor = "rgba(0,0,0,0.7)";

            everdiv[sum].style.opacity = "0";

        }

        everdiv[sum].style.backgroundColor = "black";

            everdiv[sum].style.opacity = "1";

        }

    }

    t = setInterval(change,2000);

    var number = document.getElementById("number");

    var figure = ["1","2","3","4","5","6"];

    for(var n=0;n<figure.length;n++){

        var newdiv = document.createElement("div");

        number.appendChild(newdiv);

        newdiv.style.height = "25px";

        newdiv.style.color = "white";

        newdiv.style.paddingLeft = "20px";

        newdiv.style.marginTop = "5px";

        newdiv.style.lineHeight = "25px";

        newdiv.style.backgroundColor = "rgba(0,0,0,0.7)";

        newdiv.innerText = figure[n];

    }

    var everdiv = number.getElementsByTagName("div");

    everdiv[0].style.backgroundColor = "black";

    for(var n=0;n<everdiv.length;n++){

        everdiv[n].onmouseover = function(){

            clearInterval(t);

            for(var i=0;i<everdiv.length;i++){

                everdiv[i].style.backgroundColor = "rgba(0,0,0,0.7)";

            }

            this.style.backgroundColor = "black";

            for(var m=0;m<everdiv.length;m++){

                if(everdiv[m].style.backgroundColor == "black"){

                    sum = m;

                    geted(sum);

                }

            }

        }

        everdiv[n].onmouseout = function(){

            t = setInterval(change,2000);

        }

    }

    function geted(sum) {

        var src = ["../img/01.jpg","../img/02.jpg","../img/03.jpg","../img/04.jpg","../img/05.jpg","../img/06.jpg"];

        img.src = src[sum];

    }

    var thisimg = document.getElementById("img");

    thisimg.onmouseover = function(){

        clearInterval(t);

    }

    thisimg.onmouseout = function(){

        t = setInterval(change,2000);

    }

 

 

 

 

         #rack{

               width:200px;

               height:100px;

               position: absolute;

               top:100px;

               border:1px solid paleturquoise;

               background:orange;

           }

        

   *{

   margin:0px;

   padding:0px;

   }

       #aa{

       width:200px;

       height:200px;

       background: blue;

           position: absolute;

       top:200px;

       left: 10px;

       }

        #bb{

       width:200px;

       height:200px;

       background: blue;

       position: absolute;

       top:200px;

       right:10px;

       }

  

        body{

            margin:0;

            padding:0;

        }

        #images{

            position: absolute;

            width: 100%;

            margin-top:110px;

 

        }

        #img{

            width: 1000px;

            position: relative;

            left:50%;

            margin-left:-500px;

            -webkit-box-shadow: 0 0 8px rgba(0,0,0,0.6);

        }

        #number{

            width: 200px;

            position: absolute;

            left:800px;

            top:190px;

            z-index: 10;

        }

        #middle{

            width: 1000px;

            position: relative;

            left:50%;

            margin-left:-505px;

        }

以上是关于h5~js~定时器的主要内容,如果未能解决你的问题,请参考以下文章

h5 Canvas时钟制作

js定时器问题?js高手请进!

js定时器的问题

js定时器传参

js定时器每秒执行一次,为啥时间会不准?

js定时器如何在执行完成以后往下执行