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


效果图


一、分析需求

要实现倒计时效果,可拆解为以下三个部分进而逐个击破:

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>

Javascript之实现页面倒计时效果的更多相关文章

  1. 二、JavaScript语言--JS实践--倒计时效果

    主要内容:分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计效果. Javascript 日期对象: Date()返回当前的日期和时间 getY ...

  2. 超实用的JavaScript代码段 Item1 --倒计时效果

    现今团购网.电商网.门户网等,常使用时间记录重要的时刻,如时间显示.倒计时差.限时抢购等,本文分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计 ...

  3. [JavaScript]常用的页面倒计时

    倒计时是web开发中比较常用的,以下列出常用的几个倒计时方法,仅供参考: 一 :页面倒计时 原理一般都是通过 setTimeout 或 setInterval 函数实现,下面是一个最简单的倒计时 &l ...

  4. JQuery模仿淘宝天猫魔盒抢购页面倒计时效果

    1.效果及功能说明 通过对时间的控制来告诉用户一个活动还剩多少时间,精确到秒.2.实现原理 首先定义活动的截至的时间,要重年份精确到毫秒,在获得当前的年份到秒钟,在用截至时间,减去现在的时间,剩下的还 ...

  5. jQuery实现的手机发送验证码倒计时效果代码分享

    这是一款基于jquery实现的手机发送验证码倒计时效果代码,可实现实时显示秒数倒计时的功能,还可实现对手机号码格式验证的功能,是一款常用的网站注册发送手机验证码特效代码. 效果描述:注册一个网站,当需 ...

  6. 页面倒计时跳转页面效果,js倒计时效果

    页面倒计时跳转页面效果,js倒计时效果 >>>>>>>>>>>>>>>>>>>> ...

  7. javascript特效实现(4)——当前时间和倒计时效果

    这个效果的实现关键是对Date对象和setTimeout的使用. 一共有三个例子,HTML结构如下,就不添加CSS样式了. <body> 当前时间:<p id="p1&qu ...

  8. 超实用的JavaScript代码段 --倒计时效果

    现今团购网.电商网.门户网等,常使用时间记录重要的时刻,如时间显示.倒计时差.限时抢购等,本文分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计 ...

  9. Javascript 实现倒计时效果

    代码来自于网上. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

随机推荐

  1. 寄生or独立 中国代工厂的悲惨抉择

    2015年苹果.三星.国产手机依旧外表光鲜,最起码,从出货量上看,他们的日子过得还不错,年终奖应该是能发得出来,但这些光鲜的品牌商背后,是一个个悲惨的代工厂,以及一个又一个"一将功成万骨枯& ...

  2. 关于scanf与gets的区别

    以下内容主要来源: scanf与gets读取字符串 scanf与gets函数读取字符串的区别 前两天有个同学问我scanf与gets的区别说了半天也没说出来个所以然,就搜了一下,scanf()和get ...

  3. python爬虫-纠正MD5错误认知

    m = md5(".encode()) print(m.hexdigest()) # 25d55ad283aa400af464c76d713c07ad m = md5(".enco ...

  4. Vue.js——学习笔记(一)

    Vue-自学笔记 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅 ...

  5. SDWebImage -- 封装 (网络状态检测,是否打开手机网络下下载高清图设置)

    对SDWebImage 进行封装,为了更好的节省用户手机流量,并保证在移动网络下也展示高清图,对使用SDWebImage 下载图片之前进行逻辑处理,根据本地缓存中是否有缓存原始的图片,用户是否打开移动 ...

  6. Samtec大数据技术解决方案

    序言:众所周知,大数据将在AI时代扮演重要角色,拥有海量数据的公司已在多个领域尝试对掌握的数据进行利用,大数据意识和能力进步飞快,体系和工具日趋成熟. Samtec和Molex 是获得许可从而提供 M ...

  7. SpringBoot图文教程11—从此不写mapper文件「SpringBoot集成MybatisPlus」

    有天上飞的概念,就要有落地的实现 概念十遍不如代码一遍,朋友,希望你把文中所有的代码案例都敲一遍 先赞后看,养成习惯 SpringBoot 图文教程系列文章目录 SpringBoot图文教程1「概念+ ...

  8. js实现box(2)(3)这种调用方式的方法

    box(2)(3)函数的调用方法有两种: 第一种: var box = function(num1){ return function(num2){ return num1+num2; }; }; a ...

  9. RabbitMQ 消息模式

    消息模式实例 视频教程:https://ke.qq.com/course/304104 编写代码前,最好先添加好用户并设置virtual hosts 一.简单模式 1.导入jar包 <depen ...

  10. PyQt完整入门教程

    1.GUI开发框架简介 19年来,一直在做Android ROM相关测试,也有了一定的积累:20年,计划把之前完整的测试方案.脚本.工具进行整合复用. 第一期计划是开发一个GUI的测试工具,近期也进行 ...