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 函数中的参数使用分析
Mar 27 Javascript
zeroclipboard复制到剪切板的flash
Aug 04 Javascript
js日期时间补零的小例子
Mar 05 Javascript
Jquery动态改变图片IMG的src地址示例
Jun 25 Javascript
基于jQuery实现最基本的淡入淡出效果实例
Feb 02 Javascript
详解JavaScript基本类型和引用类型
Dec 09 Javascript
基于jquery实现ajax无刷新评论
Aug 19 Javascript
javascript删除html标签函数cIsHTML
Jan 09 Javascript
three.js快速入门【推荐】
Jan 21 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
Aug 21 Javascript
Vue跨域请求问题解决方案过程解析
Aug 07 Javascript
JavaScript Array.flat()函数用法解析
Sep 02 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
Yii实现多数据库主从读写分离的方法
2014/12/29 PHP
SESSION存放在数据库用法实例
2015/08/08 PHP
javascript 处理HTML元素必须避免使用的一种方法
2009/07/30 Javascript
自己动手制作jquery插件之自动添加删除行功能介绍
2011/10/14 Javascript
js验证是否为数字的总结
2013/04/14 Javascript
js解决弹窗问题实现班级跳转DIV示例
2014/01/06 Javascript
JavaScript Math.floor方法(对数值向下取整)
2015/01/09 Javascript
JavaScript使用Prototype实现面向对象的方法
2015/04/14 Javascript
基于AngularJS+HTML+Groovy实现登录功能
2016/02/17 Javascript
Uploadify上传文件方法
2016/03/16 Javascript
第十章之巨幕页头缩略图与警告框组件
2016/04/25 Javascript
AngularJs Javascript MVC 框架
2016/06/20 Javascript
js实现html table 行,列锁定的简单实例
2016/10/13 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
2017/04/06 Javascript
javaScript日期工具类DateUtils详解
2017/12/08 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
2018/01/23 Javascript
NodeJs实现简单的爬虫功能案例分析
2018/12/05 NodeJs
vue实现两个组件之间数据共享和修改操作
2020/11/12 Javascript
python 算法 排序实现快速排序
2012/06/05 Python
python算法学习之计数排序实例
2013/12/18 Python
Python 内置函数complex详解
2016/10/23 Python
利用Python-iGraph如何绘制贴吧/微博的好友关系图详解
2017/11/02 Python
python 定义给定初值或长度的list方法
2018/06/23 Python
对python中的 os.mkdir和os.mkdirs详解
2018/10/16 Python
Python手绘可视化工具cutecharts使用实例
2019/12/05 Python
pytorch 图像中的数据预处理和批标准化实例
2020/01/15 Python
入党申请人的自我鉴定
2013/12/01 职场文书
父亲追悼会答谢词
2014/01/17 职场文书
2014年学雷锋活动总结
2014/06/26 职场文书
乡镇组织委员个人整改措施
2014/09/16 职场文书
出纳工作检讨书
2014/10/18 职场文书
大学生党性分析材料
2014/12/19 职场文书
个人总结怎么写
2015/02/26 职场文书
阿甘正传观后感
2015/06/01 职场文书
2016年全国助残日活动总结
2016/04/01 职场文书
windows系统搭建WEB服务器详细教程
2022/08/05 Servers