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 相关文章推荐
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
Feb 15 Javascript
Jquery在IE7下无法使用 $.ajax解决方法
Nov 11 Javascript
Javascript实现重力弹跳拖拽运动效果示例
Jun 28 Javascript
Angular2平滑升级到Angular4的步骤详解
Mar 29 Javascript
js实现会跳动的日历效果(完整实例)
Oct 18 Javascript
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
微信小程序使用template标签实现五星评分功能
Nov 03 Javascript
vue仿ios列表左划删除
Sep 26 Javascript
layer页面跳转,获取html子节点元素的值方法
Sep 27 Javascript
详解ECMAScript2019/ES10新属性
Dec 06 Javascript
Vue的双向数据绑定实现原理解析
Feb 17 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 修改、增加xml结点属性的实现代码
2013/10/22 PHP
PHP对表单提交特殊字符的过滤和处理方法汇总
2014/02/18 PHP
php实现约瑟夫问题的方法小结
2015/03/23 PHP
linux平台编译安装PHP7并安装Redis扩展与Swoole扩展实例教程
2016/09/30 PHP
用Javascript实现UTF8编码转换成gb2312编码
2006/12/22 Javascript
使用IE6看老赵的博客 jQuery初探
2010/01/17 Javascript
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
2011/02/23 Javascript
Jquery阻止事件冒泡 event.stopPropagation
2011/12/11 Javascript
javascript获得服务器端控件的ID的实现代码
2011/12/28 Javascript
UI Events 用户界面事件
2012/06/27 Javascript
jquery ajax 调用失败的原因示例介绍
2013/09/27 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
2014/03/08 Javascript
防止按钮在短时间内被多次点击的方法
2014/03/10 Javascript
JS比较2个日期间隔的示例代码
2014/04/15 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
2014/08/06 Javascript
基于JavaScript代码实现自动生成表格
2016/06/15 Javascript
功能强大的Bootstrap使用手册(一)
2016/08/02 Javascript
js无提示关闭浏览器窗口的两种方法分析
2016/11/06 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
2016/11/13 Javascript
关于Iframe父页面与子页面之间的相互调用
2016/11/22 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
2019/07/12 jQuery
使用JS来动态操作css的几种方法
2019/12/18 Javascript
Django内容增加富文本功能的实例
2017/10/17 Python
简单了解什么是神经网络
2017/12/23 Python
pycharm远程linux开发和调试代码的方法
2018/07/17 Python
对Python3 解析html的几种操作方式小结
2019/02/16 Python
详解python--模拟轮盘抽奖游戏
2019/04/12 Python
详解Python中的正斜杠与反斜杠
2019/08/09 Python
维也纳通行证:Vienna PASS
2019/07/18 全球购物
乌克兰在线电子产品商店:MTA
2019/11/14 全球购物
班主任新年寄语
2014/04/04 职场文书
促销活动总结
2014/04/28 职场文书
主题实践活动总结
2014/05/08 职场文书
2014年网管工作总结
2014/12/11 职场文书
老公保证书
2015/01/17 职场文书
给客户的感谢信
2015/01/21 职场文书