console 命令行工具 X clear
console
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 距离放学时间12点还有多长时间 -->
    <h1>距离放学时间还有<span></span>时<span></span>分<span></span>秒</h1>
    <script>
        var h1 = document.getElementsByTagName("h1")[0]
        var future = new Date("2021-5-24 16:38:50")
        var spanArr = document.getElementsByTagName("span")
        // 如果new Date()中没有参数,意思时获取时间对象
        //如果有值,为设置时间
        // var now = new Date();
        // console.log(future - now)
        //时间与时间的差, 得到的是毫秒值
        //根据-两侧值先隐式的转为数值然后相减得到
        // console.log(future - 1)

        //需求分析
        //1.获取未来时间与当下时间的差
        //2.开定时器
        //3.获取当前时间
        //4.拿到两者的差
        //5.把毫秒值转换为时分秒的格式
        var timer = setInterval(function () {
            var now = new Date();
            var cha = future - now;

            var s = parseInt(cha / 1000 % 60);//毫秒变秒  然后%60 能整除60的是分钟 除以60剩下的就是秒数
            var m = parseInt(cha / 1000 / 60 % 60);//能整除60的是小时 剩下的就是分钟
            var h = parseInt(cha / 1000 / 60 / 60);//
            // var d = parseInt(cha/1000/60/60/24);// 取天数
            spanArr[0].innerHTML = h
            spanArr[1].innerHTML = m
            spanArr[2].innerHTML = s

            //如果cha小于等于0,说明倒计时结束清除定时器并且h1标签倒计时结束
            if (cha <= 0) {
                clearInterval(timer)
                h1.innerHTML = "倒计时结束"
            }
        })
    </script>
</body>

</html>