JS计时器

最新推荐文章于 2025-08-12 12:14:39 发布

原创最新推荐文章于 2025-08-12 12:14:39 发布 · 385 阅读

CC 4.0 BY-SA版权

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

倒计时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>

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