使用Date和setTimeout实现倒计时Date Date 对象用于处理日期和时间。可以通过 new 关键词来定义

在body标签上加onload="down()" ，再创建一个div

    <body onload="down()">
        <div id="box"></div>
    </body>

Date

Date 对象用于处理日期和时间。可以通过 new 关键词来定义 Date 对象。

注释：Date 对象自动使用当前的日期和时间作为其初始值。

1.结束时间-当前时间=剩余时间

    var dw = new Date("2021-06-14 00:00:00") // 结束时间
    var xz = new Date()  // 当前时间
    var hm = dw - xz;   // 单位毫秒

2.将毫秒转换成天数，小时，分钟，秒

    var s = parseInt(hm / 1000 % 60)   // 秒
    var min = parseInt(hm / 1000 / 60 % 60) // 分钟
    var h = parseInt(hm / 1000 / 60 / 60 % 24) // 小时
    var day = parseInt(hm / 1000 / 60 / 60 / 24)  // 天数

3.小于10的，在前面加0

    if (s < 10) {  // 秒
        s = "0" + s
    }
    if (h < 10) {  // 小时
        h = "0" + h
    }
    if (min < 10) {   // 分钟
        min = "0" + min
    }

4.输出

   var box = document.getElementById("box");
   box.innerHTML = ("距离端午节还剩下"
            + "<a>" + day + "</a>" + "天"
            + "<a>" + h + "</a>" + "："
            + "<a>" + min + "</a>" + "："
            + "<a>" + s + "</a>")

setTimeout

setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。第二个参数指示从当前起多少毫秒后执行第一个参数。

setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 t 的变量中。

    t = setTimeout(down, 1000)

代码总片段

<!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>
    <style>
        a {
            color: red;
            font-size: 20px;
            font-weight: bold;
        }
    </style>
</head>

<body onload="down()">
    <div id="box"></div>
</body>

<script>
    function down() {
        var dw = new Date("2021-06-14 00:00:00")
        var xz = new Date()
        var hm = dw - xz;
        var s = parseInt(hm / 1000 % 60)
        var min = parseInt(hm / 1000 / 60 % 60)
        var h = parseInt(hm / 1000 / 60 / 60 % 24)
        var day = parseInt(hm / 1000 / 60 / 60 / 24)
        var box = document.getElementById("box");
        if (s < 10) {
            s = "0" + s
        }
        if (h < 10) {
            h = "0" + h
        }
        if (min < 10) {
            min = "0" + min
        }
        box.innerHTML = ("距离端午节还剩下"
            + "<a>" + day + "</a>" + "天"
            + "<a>" + h + "</a>" + "："
            + "<a>" + min + "</a>" + "："
            + "<a>" + s + "</a>")
        t = setTimeout(down, 1000)
    }
</script>

</html>