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.