计时器效果

最新推荐文章于 2024-08-22 09:48:33 发布

Ylk_IT

最新推荐文章于 2024-08-22 09:48:33 发布

阅读量114

点赞数

本文链接：https://blog.csdn.net/Ylk_manong/article/details/118613107

版权

关键词由CSDN通过智能技术生成

简单的计时器效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1-计时器</title>
    <style>
        #box{
            font-size: 30px;
            color:red;
        }
    </style>
</head>
<body>
    <button id="btn">点击自加</button>
    <button id="start">开始</button>
    <button id="stop">停止</button>
    <div id="box">0</div>
    <script>
        var btn=document.querySelector('#btn');
        var box=document.querySelector('#box');
        var start=document.querySelector('#start');
        var stop=document.querySelector('#stop');
        var num=0;
        btn.onclick=function(){
            num++;
            box.innerHTML=num;
        }
        // 延时计时器  1）setTimeout 只执行一次   2） setInterval  持续执行   
        // 写法  setTimeout(函数名/匿名函数,毫秒数)
        //setInterval(函数名/匿名函数,毫秒数)
        
        // 3
        var timer=null;
        console.log(123);

        start.onclick=function(){
            
            clearInterval(timer);

            // 1
            timer=setInterval(function(){
                num++;
                box.innerHTML=num;
            },1000);
        }
        stop.onclick=function(){

            //2
            clearInterval(timer);
        }
    </script>
</body>
</html>

希望可以帮到大家