Javascript之实现页面倒计时效果
本文将从需求实现的角度，逐步讲解如何在页面上实现倒计时效果，其中部分涉及到的知识会做拓展讲解，最后将所有代码封装，适用于不同情况下倒计时功能的实现。
效果图
一、分析需求
要实现倒计时效果，可拆解为以下三个部分进而逐个击破：
1、 使用Date方法计算对应倒计时的数据并返回
2、 利用DOM操作将得到的数据渲染到页面中
3、 通过JavaScript原生API（setInterval或setTimeout）实现倒计时效果
二、代码实现
1、 使用Date方法计算对应倒计时的数据并返回
类型1：传入具体时间对象，如2020/12/31 到 当前时间 的倒计时
function countDown(){
// 创建目标时间对象
var target_time = new Date("2020/12/31");
// 计算目标时间对象到当前时间的毫秒数
var reduce_ms = target_time.getTime() - Date.now();
// 返回需要的数据
return {
day : parseInt(reduce_ms / 1000 / 3600 / 24),
hour : parseInt(reduce_ms / 1000 / 3600 % 24),
min : parseInt(reduce_ms / 1000 / 60 % 60 ),
sec : Math.round(reduce_ms / 1000 % 60)
}
}
类型2：传入需要倒计时的具体时间，如5小时倒计时
function countDown(){
var target_time = new Date();
// 获取当前时间5小时后的目标时间对象
target_time.setHours(target_time.getHours() + 5);
// 计算目标时间对象到当前时间的毫秒数
var reduce_ms = target_time.getTime() - Date.now();
// 返回需要的数据
return {
day : parseInt(reduce_ms / 1000 / 3600 / 24),
hour : parseInt(reduce_ms / 1000 / 3600 % 24),
min : parseInt(reduce_ms / 1000 / 60 % 60 ),
sec : Math.round(reduce_ms / 1000 % 60)
}
}
问：为何要以对象的形式返回数据？
答：便于后续提取需要的数据渲染到页面中
2、 利用DOM操作将得到的数据渲染到页面中
步骤1：向HTML写入对应节点，此操作可通过 innerHTML 实现
* 为方便理解本文直接手动写入
<p>
倒计时 :
<span id="day"></span>天
<span id="hour"></span>小时
<span id="min"></span>分钟
<span id="sec"></span>秒
</p>
步骤2：将数据插入到HTML结构的对应位置
// 获取需要对应插入数据的节点
var day_ele = document.getElementById("day");
var hour_ele = document.getElementById("hour");
var min_ele = document.getElementById("min");
var sec_ele = document.getElementById("sec");
// 封装函数，当数值小于10时在前面加“0”
function addZero( num ){
if(num < 10){
return "0" + num;
}
return num;
}
// 将数据渲染到页面指定节点中
function renderCountDown(){
var res = countDown();
day_ele.innerHTML = addZero(res.day);
hour_ele.innerHTML = addZero(res.hour);
min_ele.innerHTML = addZero(res.min);
sec_ele.innerHTML = addZero(res.sec);
}
3、 通过JavaScript原生API（setInterval或setTimeout）实现倒计时效果
setInterval() 与 setTimeout() 都能实现页面倒计时，其区别在于：
setInterval() ：每指定间隔时间后执行一次传入的函数，函数会多次执行
setTimeout() ：等待指定时间后执行传入的函数，且只执行一次
方法1：使用setInterval()
setInterval(function(){
renderCountDown();
},1000);
// 可简写为下面这种形式
// setInterval(renderCountDown,1000);
renderCountDown()
方法2：使用setTimeout()
function renderCountDown(){
var res = countDown();
hour_ele.innerHTML = addZero(res.hour);
min_ele.innerHTML = addZero(res.min);
sec_ele.innerHTML = addZero(res.sec);
setTimeout(renderCountDown, 1000);
}
renderCountDown()
注意：
setTimeout()只会执行一次传入的函数。故需要将其放入到渲染函数的内部，从而实现循环调用（类似于递归思想）。
三、代码封装
<p>
倒计时 :
<span id="day"></span>天
<span id="hour"></span>小时
<span id="min"></span>分钟
<span id="sec"></span>秒
</p>
<script>
// 设置变量（不同的时间传入方式）
var target_time = new Date("2020/12/31");
// var target_time = new Date();
// target_time.setHours(target_time.getHours() + 5);
// 获取需要对应插入数据的节点
var day_ele = document.getElementById("day");
var hour_ele = document.getElementById("hour");
var min_ele = document.getElementById("min");
var sec_ele = document.getElementById("sec");
// 获取目标时间到当前时间的毫秒数，进行计算并返回结果
function countDown(){
var reduce_ms = target_time.getTime() - Date.now();
return {
day : parseInt(reduce_ms / 1000 / 3600 / 24),
hour : parseInt(reduce_ms / 1000 / 3600),
min : parseInt(reduce_ms / 1000 / 60 % 60 ),
sec : Math.round(reduce_ms / 1000 % 60)
}
}
// 将数据渲染到页面指定节点中
function renderCountDown(){
var res = countDown();
day_ele.innerHTML = addZero(res.day);
hour_ele.innerHTML = addZero(res.hour);
min_ele.innerHTML = addZero(res.min);
sec_ele.innerHTML = addZero(res.sec);
}
// 封装函数，当数值小于10时在前面加“0”
function addZero( num ){
if(num < 10){
return "0" + num;
}
return num;
}
// 实现倒计时效果
setTimeout(renderCountDown,1000);
renderCountDown()
</script>
