下课倒计时

yang 发布于 2023-5-29 20:10 阅读：351 JS基础阶段
<!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>下课倒计时</title>
    </head>
    <body>
        <script>
            /*
            1.下课倒计时，距离下课还剩下xx时xx分xx秒
            */
            // 下课时间：2023-03-14 20:00:00
            // 下课倒计时：01:00:00
            document.write("<h1>下课时间：2023-03-14 20:00:00</h1>");
            // 思路：
            // 1.获取当前时间的时间戳
            let time = new Date().getTime();
            console.log("当前时间的时间戳", time);
            // 2.获取下课时间的时间戳
            let time2 = new Date("2023-03-14 21:00:00").getTime();
            console.log("下课时间的时间戳", time2);
            // 3.当前时间和下课时间的差距（差距时间戳 = 下课时间时间戳 - 当前时间时间戳）
            let diff = (time2 - time) / 1000;
            console.log("差距秒>>>", diff);
            // 4.差距时间戳 / 1000 得到秒数，再求出对应的小时、分钟、秒
            // console.log(diff / 60 / 60); // 得到小时，0.9755808333333333
            let hour = zeroFill(Math.floor(diff / 3600)); // 得到小时
            // console.log(hour);
            let minute = zeroFill(Math.floor(diff / 60) % 60); // 得到分钟
            // console.log(minute);
            let second = zeroFill(Math.floor(diff % 60)); // 得到秒数
            // console.log("分钟", diff / 60);
            // console.log("秒", diff % 60);
            // 5.将求出的结果输出到页面
            document.write(`<h1>下课倒计时：${hour}:${minute}:${second}</h1>`);

            // 传入的值小于10，要在这个数字前补一个0
            function zeroFill(num) {
                if (num < 10) {
                    return `0${num}`;
                } else {
                    return num;
                }
                // 高级写法(薪资+5)
                // return num < 10 ? `0${num}` : num;
            }
        </script>
    </body>
</html>
下课倒计时
扫描二维码，在手机上阅读