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 相关文章推荐
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
Mar 31 Javascript
从面试题学习Javascript 面向对象(创建对象)
Mar 30 Javascript
DOM节点删除函数removeChild()用法实例
Jan 12 Javascript
JS判断是否360安全浏览器极速内核的方法
Jan 29 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
Apr 01 Javascript
jQuery ajax提交Form表单实例(附demo源码)
Apr 06 Javascript
webpack入门+react环境配置
Feb 08 Javascript
基于js文件加载优化(详解)
Jan 03 Javascript
es6函数之尾递归用法实例分析
Apr 25 Javascript
vue使用better-scroll实现滑动以及左右联动
Jun 30 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
Jul 16 Javascript
在vue中配置不同的代理同时访问不同的后台操作
Sep 11 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语法(3)
2006/10/09 PHP
IIS6的PHP最佳配置方法
2007/03/19 PHP
php 分库分表hash算法
2009/11/12 PHP
php实现数组按指定KEY排序的方法
2015/03/30 PHP
根据key删除数组中指定的元素实现方法
2017/03/02 PHP
php 生成加密公钥加密私钥实例详解
2017/06/16 PHP
javascript数组组合成字符串的脚本
2021/01/06 Javascript
javascript function调用时的参数检测常用办法
2010/02/26 Javascript
避免回车键导致的页面无意义刷新的解决方法
2011/04/12 Javascript
javascript中为某个元素指定事件的三种方式
2014/08/07 Javascript
JS打开新窗口防止被浏览器阻止的方法
2015/01/03 Javascript
提高jQuery性能优化的技巧
2015/08/03 Javascript
jquery ajax局部加载方法详解(实现代码)
2016/05/12 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
2016/08/05 Javascript
jQuery实现点击查看大图并以弹框的形式居中
2016/08/08 Javascript
JavaScript中对象的不同创建方法
2016/08/12 Javascript
谈谈Vue.js——vue-resource全攻略
2017/01/16 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
2017/03/14 Javascript
巧用weui.topTips验证数据的实例
2017/04/17 Javascript
使用Node.js实现简易MVC框架的方法
2017/08/07 Javascript
JavaScript 中Date对象的格式化代码方法汇总
2017/09/06 Javascript
详解如何从零开始搭建Express+Vue开发环境
2018/07/17 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
2019/07/09 Javascript
通过实例了解Render Props回调地狱解决方案
2020/11/04 Javascript
Python中使用bidict模块双向字典结构的奇技淫巧
2016/07/12 Python
python+matplotlib绘制3D条形图实例代码
2018/01/17 Python
Python实现的将文件每一列写入列表功能示例【测试可用】
2018/03/19 Python
使用Python和OpenCV检测图像中的物体并将物体裁剪下来
2019/10/30 Python
Python urllib request模块发送请求实现过程解析
2020/12/10 Python
德国网上宠物店:Zoobio
2018/05/23 全球购物
ECCO俄罗斯官网:北欧丹麦鞋履及皮具品牌
2020/06/26 全球购物
推广普通话演讲稿
2014/05/23 职场文书
金融系应届毕业生求职信
2014/05/26 职场文书
初中学习计划书范文
2014/09/15 职场文书
十八大宣传标语
2014/10/09 职场文书
医院志愿者活动总结
2015/05/06 职场文书