【JavaScript】内置对象 - Date 日期对象 ④ ( 制作倒计时页面 )

韩曙亮

发布于 2024-05-14 08:46:35

1640

发布于 2024-05-14 08:46:35

文章被收录于专栏：韩曙亮的移动开发专栏

文章目录

一、倒计时页面实现
- 1、需求分析
- 2、计算秒数
- 3、计算倒计时时间的天 / 时 / 分 / 秒
- 4、页面中显示倒计时时间
二、完整代码示例
- 1、完整代码
- 2、执行结果

Date 日期对象参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date

一、倒计时页面实现

1、需求分析

给定一个固定的时间 , 如 2024 年 5 月 8 日 0 时 0 分 0 秒作为终止时间 ;

倒计时显示的是剩余时间 ;

使用终止时间减去当前时间 , 就是要显示的剩余时间 ;

上述的时间 , 都要使用时间戳进行计算 ;

最终将要显示的剩余时间通过计算转为时分秒数值 ;

毫秒时间戳转为秒只需要除以 1000 即可 , 得到一个秒数 ;
秒数直接模 60 就是秒时间 ;
秒数除以 60 得到的是分数 , 模 60 得到的是分时间 ;
分数除以 60 得到的是小时数 , 模 24 得到的是小时时间 ;
小时数除以 24 得到的是天数 ;

2、计算秒数

给定一个结束时间的字符串 , 并使用 +new Date 的方式 , 获取该时间字符串对应的 Date 对象的时间戳 ;

使用 +new Date() 可以获取当前的时间戳 ;

上述两个时间戳都是毫秒时间戳 ;

二者相减 , 得到的是毫秒时间 , 需要再除以 1000 , (endTimeStamp - nowTimeStamp) / 1000 , 就可以得到倒计时秒数 ;

代码示例 :

            var timeStr = '2024-05-09 11:11:11';

            // 获取当前时间戳
            var nowTimeStamp = +new Date();

            // 获取结束时间戳
            var endTimeStamp = +new Date(timeStr);

			// 获取剩余的秒数
            var seconds = (endTimeStamp - nowTimeStamp) / 1000;

3、计算倒计时时间的天 / 时 / 分 / 秒

总秒数模 60 , 就是时间对应的秒 , seconds % 60 ;

使用三目运算符 , 令秒时间始终保证是两位数显示 , 如果小于 10 , 则在前面补 0 , second < 10 ? '0' + second : second ;

总秒数除以 60 得到总分钟数 , 一分钟 60 秒 , 再模 60 , 得到的就是时间分钟 , seconds / 60 % 60 ;

使用三目运算符 , 令分时间始终保证是两位数显示 , 如果小于 10 , 则在前面补 0 , minute < 10 ? '0' + minute : minute ;

总秒数除以 60 得到总分钟数 , 再除以 60 得到总小时数 , 一天 24 小时 , 再模 24 , 得到的就是时间小时 , seconds / 60 / 60 % 24 ;

使用三目运算符 , 令小时时间始终保证是两位数显示 , 如果小于 10 , 则在前面补 0 , hour < 10 ? '0' + hour : hour ;

总秒数除以 60 得到总分钟数 , 再除以 60 得到总小时数 , 再除以 24 , 得到的就是天时间 , seconds / 60 / 60 / 24 ;

使用三目运算符 , 令天时间始终保证是两位数显示 , 如果小于 10 , 则在前面补 0 , day < 10 ? '0' + day : day ;

代码示例 :

            // 计算剩余时间的 天 时 分 秒 时间

            // 秒
            var second = parseInt(seconds % 60);
            // 保证秒是两位数的
            second = second < 10 ? '0' + second : second;

            // 分
            var minute = parseInt(seconds / 60 % 60);
            // 保证分是两位数的
            minute = minute < 10 ? '0' + minute : minute;

            // 时
            var hour = parseInt(seconds / 60 / 60 % 24);
            // 保证时是两位数的
            hour = hour < 10 ? '0' + hour : hour;

            // 天
            var day = parseInt(seconds / 60 / 60 / 24);
            // 保证天是两位数的
            day = day < 10 ? '0' + day : day;

4、页面中显示倒计时时间

在 body 标签中设置一个 HTML 标签 , 显示时间 ;

<body>
    <h1 id="countdown"></h1>
</body>

调用 document.getElementById 函数 , 获取 HTML 标签元素 , 为其设置倒计时文本 ;

            // 将倒计时设置到页面中
            document.getElementById("countdown").innerHTML = day + " 天 " + hour + " 时 " + minute + " 分 " + second + " 秒";

最终效果如下 :

二、完整代码示例

1、完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // Date 内置对象

        // 倒计时方法 , 之后每隔 1 秒调用一次
        function countDown() {
            var timeStr = '2024-05-09 11:11:11';

            // 获取当前时间戳
            var nowTimeStamp = +new Date();

            // 获取结束时间戳
            var endTimeStamp = +new Date(timeStr);

            // 获取剩余的秒数
            var seconds = (endTimeStamp - nowTimeStamp) / 1000;

            // 计算剩余时间的 天 时 分 秒 时间

            // 秒
            var second = parseInt(seconds % 60);
            // 保证秒是两位数的
            second = second < 10 ? '0' + second : second;

            // 分
            var minute = parseInt(seconds / 60 % 60);
            // 保证分是两位数的
            minute = minute < 10 ? '0' + minute : minute;

            // 时
            var hour = parseInt(seconds / 60 / 60 % 24);
            // 保证时是两位数的
            hour = hour < 10 ? '0' + hour : hour;

            // 天
            var day = parseInt(seconds / 60 / 60 / 24);
            // 保证天是两位数的
            day = day < 10 ? '0' + day : day;

            // 将倒计时设置到页面中
            document.getElementById("countdown").innerHTML = day + " 天 " + hour + " 时 " + minute + " 分 " + second + " 秒";
        }

        setInterval(countDown, 1000);
    </script>
</head>

<body>
    <h1 id="countdown"></h1>
</body>

</html>