本文将从需求实现的角度,逐步讲解如何在页面上实现倒计时效果,其中部分涉及到的知识会做拓展讲解,最后将所有代码封装,适用于不同情况下倒计时功能的实现。
效果图
一、分析需求
要实现倒计时效果,可拆解为以下三个部分进而逐个击破:
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.