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 相关文章推荐
javascript getElementsByClassName 和js取地址栏参数
Jan 02 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
Jul 17 Javascript
Extjs4中Form的使用之本地hiddenfield
Nov 26 Javascript
js子页面获取父页面数据示例
May 15 Javascript
vue 2.0封装model组件的方法
Aug 03 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
Oct 18 Javascript
Vue写一个简单的倒计时按钮功能
Apr 20 Javascript
JavaScript判断浏览器运行环境的详细方法
Jun 30 Javascript
layer ui 导入文件之前传入数据的实例
Sep 23 Javascript
layui-select动态选中值的例子
Sep 23 Javascript
JS数组Reduce方法功能与用法实例详解
Apr 29 Javascript
多个Vue项目部署到服务器的步骤记录
Oct 22 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
拼音码表的生成
2006/10/09 PHP
php mysql procedure实现获取多个结果集的方法【基于thinkPHP】
2016/11/09 PHP
解决PHP程序运行时:Fatal error: Maximum execution time of 30 seconds exceeded in的错误提示
2016/11/25 PHP
JS图片根据鼠标滚动延时加载的实例代码
2013/07/13 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
2013/09/18 Javascript
jQuery 追加元素的方法如append、prepend、before
2014/01/16 Javascript
调整小数的格式保留小数点后两位
2014/05/14 Javascript
JS实现图片放大镜效果的方法
2015/02/27 Javascript
javascript中一些util方法汇总
2015/06/10 Javascript
node.js cookie-parser之parser.js
2016/06/06 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
2016/06/21 Javascript
JavaScript prototype属性详解
2016/10/25 Javascript
利用node.js搭建简单web服务器的方法教程
2017/02/20 Javascript
vue过渡和animate.css结合使用详解
2017/06/14 Javascript
Vue filter介绍及详细使用
2018/04/04 Javascript
layui结合form,table的全选、反选v1.0示例讲解
2018/08/15 Javascript
Node.js开发之套接字(socket)编程入门示例
2019/11/05 Javascript
Vue+Node实现的商城用户管理功能示例
2019/12/23 Javascript
对于Python异常处理慎用“except:pass”建议
2015/04/02 Python
python实现红包裂变算法
2016/02/16 Python
深入理解python多进程编程
2016/06/12 Python
python如何实现不可变字典inmutabledict
2020/01/08 Python
python实现发送邮件
2021/03/02 Python
uniapp+Html5端实现PC端适配
2020/07/15 HTML / CSS
英国泰坦旅游网站:全球陪同游览,邮轮和铁路旅行
2016/11/29 全球购物
中学生自我评价范文
2014/02/08 职场文书
写给老婆的检讨书
2014/02/21 职场文书
学校安全生产月活动总结
2014/07/05 职场文书
毕业证委托书范文
2014/09/26 职场文书
工人先进事迹材料
2014/12/26 职场文书
2015最新学生自我评价范文
2015/03/03 职场文书
刑事上诉状(无罪)
2015/05/23 职场文书
2015年秋季学校开学标语
2015/07/16 职场文书
Go各时间字符串使用解析
2021/04/02 Golang
python本地文件服务器实例教程
2021/05/02 Python
科学家测试在太空中培育人造肉,用于未来太空旅行
2022/04/29 数码科技