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

文章目录

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

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

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/05f51bf920ce4e26b30ee1f819527362.gif)

一、倒计时页面实现

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>