js（时间：计时器，倒计时）

最新推荐文章于 2024-04-13 16:57:13 发布

LaoXieyyds

最新推荐文章于 2024-04-13 16:57:13 发布

阅读量409

点赞数 1

分类专栏： js 计时器文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/LaoXieyyds/article/details/126462187

版权

js 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

计时器

2 篇文章 0 订阅

订阅专栏

<!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="start">开始计时</button>
    <button id="stop">停止计时</button>
    <p>
        <span id="sp1">00</span>
        <span>:</span>
        <span id="sp2">00</span>
        <span>:</span>
        <span id="sp3">000</span>
    </p>
    <script>
        /*var a = document.querySelector("p");
        var b = document.querySelector("button");
        var num = 0;
        b.onclick = function(){
            setTimeout(function(){
                num++;
                a.innerText = num;
            },2000)
        }*/
        var a0 = document.querySelector("#sp1");
        var a = document.querySelector("#sp2");
        var a1 = document.querySelector("#sp3");
        var b = document.querySelector("#start");
        var c = document.querySelector("#stop");
        var d;
        var num = 0;
        var num1 = 0;
        b.onclick = function(){
            if(num1 >= 1){
                return;
            }
            num1++;
            d = setInterval(function(){
                num++;
                a1.innerText = num%1000;
                a.innerText = parseInt(num/1000%60);
                a0.innerText = parseInt(num/1000/60);
            },1)
        }
        c.onclick = function(){
            clearInterval(d);
            num1 = 0;
        }
    </script>
</body>
</html>

querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
b.onclick ，点击事件。
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
innerText，获取元素文本。
parseInt，取整。
clearInterval（），取消，或者清除 setInterval() 函数设定的定时执行操作。
当我们编写完后，会发现一个BUG，就是一直点击开始，，会看到，计时会越来越快，这是因为，做点击事件进行计时，但没有停止函数，或者返回函数，所以一直点击，函数一直重复叠加运行，就会导致运行时的叠加。
这个时候，停止 setInterval()函数是不可能的，程序需要它来运行，进行数字的变化，所以，本人在这里加入了一个if函数，用来判断，开始计时这个按钮能否点击，而停止后，又将if函数初始化，使其能够停止后，可以继续点击开始按钮。
在这里插入图片描述

<!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>
    <p></p>
    <script>
        var data2 = +new Date("2022-10-01 00:00:00"); 
        var p = document.querySelector("p")
        setInterval(function(){
            var data1 = +new Date();
            var data = data2 - data1;
            var a = parseInt(data/1000/60/60/24);
            var a1 = parseInt(data/1000/60/60%24);
            var a2 = parseInt(data/1000/60%60);
            var a3 = parseInt(data/1000%60);
            var a4 = parseInt(data%1000);
            if(a < 10){
                a = "0"+a
            }
            if(a1 < 10){
                a1 = "0"+a1
            }
            if(a2 < 10){
                a2 = "0"+a2
            }
            if(a3 < 10){
                a3 = "0"+a3
            }
            if(a4 < 100){
                a4 = "00"+a4
            }
            p.innerText = a + "天:"+a1 + "小时:"+a2 + "分钟:"+a3 + "秒:"+ a4 +"毫秒";
        },1)
        
    </script>
</body>
</html>

+new Date()，获取当时的时间戳，单位是毫秒，如果在括号里输入时间，则会获取括号里的时间戳。
倒计时计算，是根据某个固定时间，减去现在时间，然后得到剩余时间，再用innerText输出文本。
在这里插入图片描述

<!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>
    <input type="text" name="" id=""><button>获取验证码<span></span></button>
    <script>
        var data1 = +new Date();
        var data2 = data1 + 60*1000;
        var bu = document.querySelector("button");
        var sp = document.querySelector("span");
        var d;
        bu.onclick = function(){
            d = setInterval(function(){
                var data1 = +new Date();
                var data = data2 - data1;
                var a1 = parseInt(data / 1000 % 60);
                sp.innerText = a1;
                if(a1 == 0){
                    bu.innerHTML = "获取验证码失败"
                    clearInterval(d);
                }
            },1)
        }
        
    </script>
</body>
</html>