简单定时器

最新推荐文章于 2023-03-02 15:46:53 发布

xiaoDream-

最新推荐文章于 2023-03-02 15:46:53 发布

阅读量458

点赞数

本文链接：https://blog.csdn.net/qq_41392076/article/details/122379457

版权

JavaScript HTML 倒计时定时器事件处理

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

1.定时器

html和JavaScript代码:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn" onclick="onBtn()">开始倒计时</button>
    <script>
        var count = 10;
        //定义变量,来控制计时器的添加
        var time = true;
        console.log(time);
        function onBtn(){
            if(time){
                var timer = setInterval(function(){
                    //让倒计时在button里面显示
                    document.querySelector('#btn').innerHTML = --count;
                    //判断倒计时是否结束
                    if(count === 0)
                    {
                        //倒计时结束就清除定时器
                        clearInterval(timer);
                        //倒计时结束修改按钮内容
                        document.querySelector('#btn').innerHTML = '重新开始倒计时';
                        count = 10;
                        time =true;
                    }
                },1000)
                time=false;
          }else{
              return false;
          }
            
          
        }
        
    </script>
</body>
</html>