JS动态显示倒计时效果


Posted in Javascript onDecember 12, 2019

JS动态显示倒计时效果

1.页面布局

<h1 id="show">距离2020年元旦还有:<span></span>天<span></span>小时<span></span>分<span></span>秒</h1>

2.js动态显示

getTime()获得设定的时期与1970年1月1日时间相差的毫秒数

1)获得插入数字的位置

var show=document.getElementById("show").getElementsByTagName("span");

2)声明现在的时间和未来的时间

var timeing=new Date();
var time=new Date(2020,0,1,0,0,0);

3)获得两个时间差

var num=time.getTime()-timeing.getTime();

4)计算天数(24小时60分钟60秒*1000毫秒) parseInt()取整

var day=parseInt(num/(24*60*60*1000));

5)获得去除天数后剩余的毫秒数

num=num%(24*60*60*1000);

6)计算小时和获得去除小时后剩余的毫秒数

var hour=parseInt(num/(60*60*1000));      
num=num%(60*60*1000);

7)计算分钟和获得去除分钟后剩余的毫秒数

var minute=parseInt(num/(60*1000));
num=num%(60*1000);

8)计算秒

var seconde=parseInt(num/1000);

9)页面上显示

show[0].innerHTML=day;
       show[1].innerHTML=hour;
       show[2].innerHTML=minute;
       show[3].innerHTML=seconde;

10)设置定时器每一秒获取一次新的时间

3.源码

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 </head>
 <body>
 
 <h1 id="show">距离2020年元旦还有:<span></span>天<span></span>小时<span></span>分<span></span>秒</h1>
 
 <script>
  var show=document.getElementById("show").getElementsByTagName("span");
  
  setInterval(function(){
  var timeing=new Date();
  var time=new Date(2020,0,1,0,0,0);
      var num=time.getTime()-timeing.getTime();
      var day=parseInt(num/(24*60*60*1000));  
      num=num%(24*60*60*1000);
      var hour=parseInt(num/(60*60*1000));      
      num=num%(60*60*1000);
      var minute=parseInt(num/(60*1000));
      num=num%(60*1000);
      var seconde=parseInt(num/1000);
       show[0].innerHTML=day;
       show[1].innerHTML=hour;
       show[2].innerHTML=minute;
       show[3].innerHTML=seconde;
      },100)
 </script>
 </body>
</html>

总结

以上所述是小编给大家介绍的JS动态显示倒计时效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
浅谈javascript 面向对象编程
Oct 28 Javascript
读jQuery之四(优雅的迭代)
Jun 20 Javascript
密码强度检测效果实现原理与代码
Jan 04 Javascript
js获取dom的高度和宽度(可见区域及部分等等)
Jun 13 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
Dec 08 Javascript
jquery插件autocomplete用法示例
Jul 01 Javascript
js控制按钮,防止频繁点击响应的实例
Feb 15 Javascript
详解Javascript几种跨域方式总结
Feb 27 Javascript
JS正则表达式验证中文字符
May 08 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
angular过滤器实现排序功能
Jun 27 Javascript
vue2.0自定义指令示例代码详解
Apr 25 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
Dec 12 #Javascript
js实现倒计时秒杀效果
Mar 25 #Javascript
vue el-table实现自定义表头
Dec 11 #Javascript
Vue如何获取数据列表展示
Dec 11 #Javascript
vue el-table实现行内编辑功能
Dec 11 #Javascript
Vue.js实现可编辑的表格
Dec 11 #Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
Dec 11 #Javascript
You might like
php empty函数判断mysql表单是否为空
2010/04/12 PHP
php全排列递归算法代码
2012/10/09 PHP
JQuery上传插件Uploadify使用详解及错误处理
2010/04/27 Javascript
在JavaScript并非所有的一切都是对象
2013/04/11 Javascript
jquery cookie实现的简单换肤功能适合小网站
2013/08/25 Javascript
12种不宜使用的Javascript语法整理
2013/11/04 Javascript
JS函数this的用法实例分析
2015/02/05 Javascript
js实现向右横向滑出的二级菜单效果
2015/08/27 Javascript
基于javascript实现全国省市二级联动下拉选择菜单
2016/01/28 Javascript
JavaScript Date 知识浅析
2017/01/29 Javascript
canvas实现图像布局填充功能
2017/02/06 Javascript
jQuery实现链接的title快速出现的方法
2017/02/20 Javascript
vue之数据交互实例代码
2017/06/16 Javascript
vue.js学习之UI组件开发教程
2017/07/03 Javascript
vue自定义全局共用函数详解
2018/09/18 Javascript
生产制造追溯系统之在线打印功能
2019/06/03 Javascript
Typescript的三种运行方式(小结)
2019/09/18 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
2020/03/10 Javascript
基于javascript处理nginx请求过程详解
2020/07/07 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
2021/02/18 Vue.js
JavaScript 中的执行上下文和执行栈实例讲解
2021/02/25 Javascript
[38:21]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS Newbee
2018/03/31 DOTA
[01:15:00]LGD vs Mineski Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
Python程序员面试题 你必须提前准备!(答案及解析)
2018/01/23 Python
使用python进行文本预处理和提取特征的实例
2018/06/05 Python
python多进程使用及线程池的使用方法代码详解
2018/10/24 Python
如何利用Anaconda配置简单的Python环境
2019/06/24 Python
ZABBIX3.2使用python脚本实现监控报表的方法
2019/07/02 Python
使用pycharm在本地开发并实时同步到服务器
2019/08/02 Python
python3连接MySQL8.0的两种方式
2020/02/17 Python
将数据集制作成VOC数据集格式的实例
2020/02/17 Python
python实现UDP协议下的文件传输
2020/03/20 Python
Python使用正则表达式实现爬虫数据抽取
2020/08/17 Python
HTML5 video 视频标签使用介绍
2014/02/03 HTML / CSS
校运会入场式解说词
2014/02/10 职场文书
用人单位终止解除劳动合同证明书
2014/10/06 职场文书