Javascript之实现页面倒计时效果

2024-07-09 14:01| 来源: 网络整理| 查看: 265

本文将从需求实现的角度，逐步讲解如何在页面上实现倒计时效果，其中部分涉及到的知识会做拓展讲解，最后将所有代码封装，适用于不同情况下倒计时功能的实现。

效果图

倒计时效果图

一、分析需求要实现倒计时效果，可拆解为以下三个部分进而逐个击破：

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 实现 * 为方便理解本文直接手动写入

倒计时 : 天小时分钟秒

步骤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()只会执行一次传入的函数。故需要将其放入到渲染函数的内部，从而实现循环调用（类似于递归思想）。

三、代码封装

倒计时 : 天小时分钟秒

// 设置变量（不同的时间传入方式） 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()

【本文地址】

公司简介

联系我们