js定时器实现倒计时效果


Posted in Javascript onNovember 05, 2017

本文实例为大家分享了js定时器实现倒计时效果展示的具体代码,供大家参考,具体内容如下

日期函数

js定时器实现倒计时效果

倒计时 =  用 将来的时间  -   现在的时间 

问题:将来时间 距离 1970 毫秒数   -     现在距离 1970年1           

用将来的毫秒数 -  现在的毫秒数   不断转换就可以了

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
 body{
  font-size:30px;
  text-align: center;
  color:red;
 }
 </style>
 <script>
 window.onload = function(){
  var demo = document.getElementById("demo");
  var endTime = new Date("2017/11/12 17:30:00"); // 最终时间
  setInterval(clock,1000); // 开启定时器
  function clock(){
  var nowTime = new Date(); // 一定是要获取最新的时间
  // console.log(nowTime.getTime()); 获得自己的毫秒
  var second = parseInt((endTime.getTime() - nowTime.getTime()) / 1000);
  // 用将来的时间毫秒 - 现在的毫秒 / 1000 得到的 还剩下的秒 可能处不断 取整
  // console.log(second);
   // 一小时 3600 秒
  // second / 3600 一共的小时数 /24 天数
  var d = parseInt(second / 3600 / 24); //天数
  //console.log(d);
  var h = parseInt(second / 3600 % 24) // 小时
  // console.log(h);
  var m = parseInt(second / 60 );
  //console.log(m);
  var s = parseInt(second ); // 当前的秒
  console.log(s);
  /* if(d<10)
  {
   d = "0" + d;
  }*/
  d<10 ? d="0"+d : d;
  h<10 ? h="0"+h : h;
  m<10 ? m="0"+m : m;
  s<10 ? s="0"+s : s;
  demo.innerHTML = "距离抢购时间还剩: "+d+"天 "+h+"小时 "+m+"分钟 "+s+"秒";

  }
 }
 </script>
</head>
<body>
<div id="demo"></div>
</body>
</html>

更多内容请参考:js实现倒计时功能汇总

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery示例收集
Nov 05 Javascript
JQuery球队选择实例
May 18 Javascript
jquery超简单实现手风琴效果的方法
Jun 05 Javascript
Google 地图类型详解及示例代码
Aug 06 Javascript
微信开发 js实现tabs选项卡效果
Oct 28 Javascript
BootStrop前端框架入门教程详解
Dec 25 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
VueRouter导航守卫用法详解
Dec 25 Javascript
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
小程序实现搜索界面 小程序实现推荐搜索列表效果
May 18 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
Sep 17 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
Jun 12 Javascript
Vuejs实现购物车功能
Nov 05 #Javascript
JavaScript实现音乐自动切换和轮播
Nov 05 #Javascript
vue+node+webpack环境搭建教程
Nov 05 #Javascript
JavaScript实现三级级联特效
Nov 05 #Javascript
angular中不同的组件间传值与通信的方法
Nov 04 #Javascript
详解使用React全家桶搭建一个后台管理系统
Nov 04 #Javascript
JavaScript中立即执行函数实例详解
Nov 04 #Javascript
You might like
php使用Jpgraph绘制3D饼状图的方法
2015/06/10 PHP
使用ThinkPHP的自动完成实现无限级分类实例详解
2016/09/02 PHP
Nigma vs Liquid BO3 第一场2.14
2021/03/10 DOTA
JavaScript URL参数读取改进版
2009/01/16 Javascript
javascript 打印内容方法小结
2009/11/04 Javascript
jQuery LigerUI 使用教程入门篇
2012/01/18 Javascript
浅析jquery的js图表组件highcharts
2014/03/06 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
2015/03/02 Javascript
JS加载iFrame出现空白问题的解决办法
2016/05/13 Javascript
jQuery简单实现上下,左右滑动的方法
2016/06/01 Javascript
使用Script元素发送JSONP请求的方法
2016/06/12 Javascript
javascript 常用验证函数总结
2016/06/28 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
2017/04/10 Javascript
jQuery列表检索功能实现代码
2017/07/17 jQuery
微信小程序 scroll-view实现锚点滑动的示例
2017/12/06 Javascript
通过循环优化 JavaScript 程序
2019/06/24 Javascript
浅谈vue异步数据影响页面渲染
2019/10/29 Javascript
vue实现的封装全局filter并统一管理操作示例
2020/02/02 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
2020/07/31 Javascript
[03:58]2014DOTA2国际邀请赛 龙宝赛后解密DK获胜之道
2014/07/14 DOTA
python实现ip查询示例
2014/03/26 Python
python 爬取微信文章
2016/01/30 Python
浅谈Python2.6和Python3.0中八进制数字表示的区别
2017/04/28 Python
在Python中通过getattr获取对象引用的方法
2019/01/21 Python
如何通过python实现全排列
2020/02/11 Python
Python importlib动态导入模块实现代码
2020/04/16 Python
Python求解排列中的逆序数个数实例
2020/05/03 Python
Supersmart英国:欧洲市场首批食品补充剂供应商之一
2018/05/05 全球购物
区域销售经理职责
2013/12/22 职场文书
领导的自我鉴定
2013/12/28 职场文书
大学军训感言200字
2014/02/26 职场文书
逃课检讨书怎么写
2015/01/01 职场文书
2015年业务工作总结范文
2015/04/10 职场文书
2016教师廉洁从教心得体会
2016/01/13 职场文书
安全学习心得体会范文
2016/01/18 职场文书
Python爬虫实战之爬取携程评论
2021/06/02 Python