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 相关文章推荐
cnblogs TagCloud基于jquery的实现代码
Jun 11 Javascript
JS对象与JSON格式数据相互转换
Feb 20 Javascript
js实现div的切换特效上一个下一个
Feb 11 Javascript
node.js中的events.emitter.removeListener方法使用说明
Dec 10 Javascript
JS实现FLASH幻灯片图片切换效果的方法
Mar 04 Javascript
基于canvas实现的钟摆效果完整实例
Jan 26 Javascript
使用JavaScript脚本判断页面是否在微信中被打开
Mar 06 Javascript
微信小程序实现YDUI的ScrollNav组件
Feb 02 Javascript
实现jquery放大镜的两种方法
Feb 22 jQuery
Vue 项目代理设置的优化
Apr 17 Javascript
express如何解决ajax跨域访问session失效问题详解
Jun 20 Javascript
微信小程序实现简单的select下拉框
Nov 23 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
Protoss建筑一览
2020/03/14 星际争霸
PHP常用技巧总结(附函数代码)
2012/02/04 PHP
既简单又安全的PHP验证码 附调用方法
2016/06/02 PHP
ThinkPHP3.1.x修改成功与失败跳转页面的方法
2017/09/29 PHP
详解thinkphp5+swoole实现异步邮件群发(SMTP方式)
2017/10/13 PHP
PHP7新特性
2021/03/09 PHP
学习JavaScript的最佳方法分享
2011/10/21 Javascript
javascript:文字不间断向左移动的实例代码
2013/08/08 Javascript
JavaScript中匿名、命名函数的性能测试
2014/09/04 Javascript
Javascript控制input输入时间格式的方法
2015/01/28 Javascript
JavaScript中子对象访问父对象的方式详解
2016/09/01 Javascript
AngularJs  E2E Testing 详解
2016/09/02 Javascript
浅谈vuepress 踩坑记
2018/04/18 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
2018/09/04 Javascript
nodejs实现用户登录路由功能
2019/05/22 NodeJs
微信小程序简单的canvas裁剪图片功能详解
2019/07/12 Javascript
JS eval代码快速解密实例解析
2020/04/23 Javascript
Vue-cli 移动端布局和动画使用详解
2020/08/10 Javascript
[02:19]DOTA2上海特级锦标赛 观赛指南 Spectator Guide
2016/02/04 DOTA
Python每天必学之bytes字节
2016/01/28 Python
python动态加载包的方法小结
2016/04/18 Python
python的pandas工具包,保存.csv文件时不要表头的实例
2018/06/14 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
tensorflow如何批量读取图片
2019/08/29 Python
python通过实例讲解反射机制
2019/10/17 Python
使用python快速在局域网内搭建http传输文件服务的方法
2019/11/14 Python
keras模型可视化,层可视化及kernel可视化实例
2020/01/24 Python
Python中使用filter过滤列表的一个小技巧分享
2020/05/02 Python
惊艳的手工时装首饰:Migonne Gavigan
2018/02/23 全球购物
美国牙科折扣计划:DentalPlans.com
2019/08/26 全球购物
西班牙高科技产品购物网站:MejorDeseo
2019/09/08 全球购物
一些关于MySql加速和优化的面试题
2014/01/30 面试题
三年级语文教学反思
2014/02/01 职场文书
小学生迎国庆演讲稿
2014/09/05 职场文书
nginx反向代理时如何保持长连接
2021/03/31 Servers
使用numpy nonzero 找出非0元素
2021/05/14 Python