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 框架小结 个人工作经验
Jun 13 Javascript
javascript实现模拟时钟的方法
May 13 Javascript
jQuery实现的进度条效果
Jul 15 Javascript
Js与Jq获取浏览器和对象值的方法
Mar 18 Javascript
第十篇BootStrap轮播插件使用详解
Jun 21 Javascript
微信小程序 两种为对象属性赋值的方式详解
Feb 23 Javascript
Node.js pipe实现源码解析
Aug 12 Javascript
写给vue新手们的vue渲染页面教程
Sep 01 Javascript
基于JavaScript实现五子棋游戏
Aug 26 Javascript
详解webpack require.ensure与require AMD的区别
Dec 13 Javascript
JavaScript函数的特性与应用实践深入详解
Dec 30 Javascript
ant-design-vue 实现表格内部字段验证功能
Dec 16 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中让curl支持sock5的代码实例
2015/01/21 PHP
php实现的Curl封装类Curl.class.php用法实例分析
2015/09/25 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
JQuery里选择超链接的实现代码
2011/05/22 Javascript
jquery获取table中的某行全部td的内容方法
2013/03/08 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
2014/06/06 Javascript
jQuery超简单选项卡完整实例
2015/09/26 Javascript
AngularJS中过滤器的使用与自定义实例代码
2016/09/17 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
2020/04/18 Javascript
详解Vue方法与事件
2017/03/09 Javascript
JS简单获取并修改input文本框内容的方法示例
2018/04/08 Javascript
Angular7.2.7路由使用初体验
2019/03/01 Javascript
javascript原型链学习记录之继承实现方式分析
2019/05/01 Javascript
JavaScript中Dom操作实例详解
2019/07/08 Javascript
js实现超级玛丽小游戏
2020/03/18 Javascript
Vue + ts实现轮播插件的示例
2020/11/10 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
2020/11/20 Vue.js
[01:21:58]守擂赛DOTA2第一周决赛
2020/04/22 DOTA
利用Python进行异常值分析实例代码
2017/12/07 Python
python3+PyQt5实现支持多线程的页面索引器应用程序
2018/04/20 Python
对pandas读取中文unicode的csv和添加行标题的方法详解
2018/12/12 Python
提升Python效率之使用循环机制代替递归函数
2019/07/23 Python
numpy.ndarray 实现对特定行或列取值
2019/12/05 Python
Python3.7+tkinter实现查询界面功能
2019/12/24 Python
Numpy中ndim、shape、dtype、astype的用法详解
2020/06/14 Python
Python延迟绑定问题原理及解决方案
2020/08/04 Python
使用CSS3配合IE滤镜实现渐变和投影的效果
2015/09/06 HTML / CSS
森海塞尔美国官网:Sennheiser耳机与耳麦
2017/07/19 全球购物
Hotels.com泰国:酒店预订网站
2019/11/20 全球购物
EJB2和EJB3在架构上的不同点
2014/09/29 面试题
企业授权委托书范本
2014/04/02 职场文书
银行服务明星推荐材料
2014/05/29 职场文书
文员求职信
2014/07/15 职场文书
初中作文评语
2014/12/25 职场文书
爱岗敬业事迹材料
2019/06/20 职场文书
用JS创建一个录屏功能
2021/11/11 Javascript