文章目录
- 一、倒计时页面实现
- 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>
2、执行结果
