JS计时器

来源：互联网发布：人工智能取代数据分析编辑：程序博客网时间：2024/06/06 00:57

今天给大家讲两个有关计时器的例子，设置计时器时，你需要根据要求来添加计时器，清除计时器，有时候可能会清除计时器清除不了，而且会造成运动越来越快，这是因为计时器不是全局变量造成的，下面举一个倒计时的例子与无缝滚动

倒计时100秒

 <!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8">    <title>倒计时</title>    <style type="text/css">        .wrap{            width: 300px;            height: 150px;            background: black;            margin: 10px auto;            color: white;            text-align: center;            padding: 30px 10px;            box-sizing: border-box;        }        input{            width: 30px;            text-align: center;            vertical-align: middle;        }        label{            vertical-align: middle;        }        #btn{            margin-top: 30px;            width: 280px;            height: 40px;            line-height: 25px;            text-align: center;            font-size: 22px;            background: green;            color: white;            border: 2px solid gray;        }    </style></head><body>    <div class="wrap">        <input type="text" id="inp1" value="1"><label> 分钟 </label>        <input type="text" id="inp2" value="10"><label> 秒 </label>        <input type="button" id="btn" value="启动">    </div>    <script type="text/javascript">        var btn=document.getElementById("btn");        var inp1=document.getElementById("inp1");        var inp2=document.getElementById("inp2");            var c=1;            function demo(){                var a=inp1.value;                var b=inp2.value;                    b--;                    if(b<0){                        if(a==1){                                               a=0;                            b=59;                        }                    }if(b<=0 && a<=0){                                                      b=0;                            a=0;                                            }                    inp1.value=a;                    inp2.value=b;            }            var timer=setInterval(function(){                    },1000)             btn.onclick=function(){                                                 if(c%2==1){                    btn.style.background="darkred";                    btn.value="取消";                   timer=setInterval(function(){                    demo();                    },1000)                 }                           if(c%2==0){                        btn.style.background="green"                        btn.value="启动"                        clearInterval(timer);                                   }                                       c++;            }    </script>  </body> </html>

上面就是100秒的倒计时，刚开始我就是没有设置全局变量而导致清除不了，现在搞定了就会发现真的好简单。

无缝滚动

 <!DOCTYPE html><html lang="en">      <head>    <meta charset="UTF-8">    <title>无缝滚动</title>    <style type="text/css">        * { margin: 0; padding: 0; }        #wrap { position: relative; width: 600px; height:300px; margin: 20px auto; border: 1px #ccc solid; overflow: hidden; }        #roll { position: absolute; left: 0; width: 9999px; overflow: hidden; }        #roll img { float: left; width: 300px; height: 300px; }    </style></head><body>    <div id="wrap">        <div id="roll">            ![](images/img01.jpg)            ![](images/img02.jpg)            ![](images/img03.jpg)            ![](images/img04.jpg)            ![](images/img01.jpg)            ![](images/img02.jpg)            ![](images/img03.jpg)            ![](images/img04.jpg)        </div>    </div></body><script type="text/javascript">        var count=0;        var roll=document.getElementById("roll");        var img=document.querySelectorAll("img");        function demo(){            count-=3;            if(count<-1200){                count=0;            }                       roll.style.left=count+'px';            console.log(roll.style.left)        }        var timer=setInterval(function(){                   demo();    },10)    roll.onmouseover=function(){                    clearInterval(timer);    }     roll.onmouseout=function(){        timer=setInterval(function(){            demo();        },10)}</script></html>

通过上面的代码就可以实现无缝滚动。

阅读全文

0 0