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 相关文章推荐
基于Jquery的温度计动画效果
Jun 18 Javascript
jQuery1.6 正式版发布并提供下载
May 05 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
May 29 Javascript
javascript中mouseover、mouseout使用详解
Jul 19 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
Jan 10 Javascript
Angular2 路由问题修复详解
Mar 01 Javascript
微信小程序网络请求wx.request详解及实例
May 18 Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
Sep 16 Javascript
全面分析JavaScript 继承
May 30 Javascript
JS字符串和数组如何实现相互转化
Jul 02 Javascript
Vue 禁用浏览器的前进后退操作
Sep 04 Javascript
vue 二维码长按保存和复制内容操作
Sep 22 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模拟post行为代码总结(POST方式不是绝对安全)
2012/02/22 PHP
php使用curl代理实现抓取数据的方法
2017/02/03 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
phpstudy2020搭建站点的实现示例
2020/10/30 PHP
PHP7 新增常量
2021/03/09 PHP
如何用js控制css中的float的代码
2007/08/16 Javascript
jQuery 开天辟地入门篇一
2009/12/09 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
2013/04/07 Javascript
Javascript call和apply区别及使用方法
2013/11/14 Javascript
setInterval计时器不准的问题解决方法
2014/05/08 Javascript
JavaScript前端实现压缩图片功能
2020/03/06 Javascript
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
Python中atexit模块的基本使用示例
2015/07/08 Python
浅谈机器学习需要的了解的十大算法
2017/12/15 Python
使用python获取csv文本的某行或某列数据的实例
2018/04/03 Python
Python实现的个人所得税计算器示例
2018/06/01 Python
Python字符串匹配之6种方法的使用详解
2019/04/08 Python
flask框架自定义过滤器示例【markdown文件读取和展示功能】
2019/11/08 Python
nginx搭建基于python的web环境的实现步骤
2020/01/03 Python
Python with标签使用方法解析
2020/01/17 Python
pycharm实现print输出保存到txt文件
2020/06/01 Python
python分布式爬虫中消息队列知识点详解
2020/11/26 Python
宝塔面板出现“open_basedir restriction in effect. ”的解决方法
2021/03/14 PHP
HTML5的语法变化介绍
2013/08/13 HTML / CSS
实例教程 利用html5和css3打造一款创意404页面
2014/10/20 HTML / CSS
战友聚会邀请函
2014/01/18 职场文书
会计毕业自我鉴定
2014/02/05 职场文书
物业保安员岗位职责
2014/03/14 职场文书
《陈毅探母》教学反思
2014/05/01 职场文书
本科生就业推荐信
2014/05/19 职场文书
大学活动总结模板
2014/07/10 职场文书
2014大学生党员评议个人总结
2014/09/22 职场文书
旷工检讨书1000字
2015/01/01 职场文书
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers
Python OpenCV 图像平移的实现示例
2021/06/04 Python
《吸血鬼幸存者》新内容发布 追加多个全新模式
2022/04/07 其他游戏