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 this 和 $(this) 的区别
Aug 23 Javascript
Json对象替换字符串占位符实现代码
Nov 17 Javascript
Javascript绝句欣赏 一些经典的js代码
Feb 22 Javascript
JavaScript 图像动画的小demo
May 23 Javascript
JS动态插入并立即执行回调函数的方法
Apr 21 Javascript
js学习笔记之事件处理模型
Oct 31 Javascript
Vue.js双向绑定操作技巧(初级入门)
Dec 27 Javascript
巧用canvas
Jan 21 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
Jan 23 Javascript
vue.js评论发布信息可插入QQ表情功能
Aug 08 Javascript
vue 的keep-alive缓存功能的实现
Mar 22 Javascript
前端JS获取URL参数的4种方法总结
Apr 05 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 正则学习实例
2008/07/30 PHP
destoon利用Rewrite规则设置网站安全
2014/06/21 PHP
微信公众号开发之文本消息自动回复php代码
2016/08/08 PHP
php封装的smartyBC类完整实例
2016/10/19 PHP
动态加载脚本提升javascript性能
2014/02/24 Javascript
jquery通过ajax加载一段文本内容的方法
2015/01/15 Javascript
JS制作手机端自适应缩放显示
2015/06/11 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
2016/05/10 Javascript
js 判断一组日期是否是连续的简单实例
2016/07/11 Javascript
详解jQuery插件开发方式
2016/11/22 Javascript
Bootstrap3 图片(响应式图片&amp;图片形状)
2017/01/04 Javascript
Vue实现自带的过滤器实例
2017/03/09 Javascript
收藏AngularJS中最重要的核心功能
2017/07/09 Javascript
vue使用axios时关于this的指向问题详解
2017/12/22 Javascript
Less 安装及基本用法
2018/05/05 Javascript
JavaScript函数Call、Apply原理实例解析
2020/02/17 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
2020/02/23 Javascript
js实现磁性吸附的示例
2020/10/26 Javascript
[39:46]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第二场 11.25
2020/11/25 DOTA
Python爬取读者并制作成PDF
2015/03/10 Python
python中使用mysql数据库详细介绍
2015/03/27 Python
PyCharm+Qt Designer+PyUIC安装配置教程详解
2019/06/13 Python
python 普通克里金(Kriging)法的实现
2019/12/19 Python
Kmeans均值聚类算法原理以及Python如何实现
2020/09/26 Python
使用sublime text3搭建Python编辑环境的实现
2021/01/12 Python
HomeAway英国:全球领先的度假租赁在线市场
2020/02/03 全球购物
上海某公司.net方向笔试题
2014/09/14 面试题
幼师自我鉴定范文
2013/10/01 职场文书
企业元宵节主持词
2014/03/25 职场文书
五分钟演讲稿
2014/04/30 职场文书
个人担保书格式范文
2014/05/12 职场文书
幼儿园教师工作总结2015
2015/04/02 职场文书
2015年人事专员工作总结
2015/04/29 职场文书
刑事上诉状范文
2015/05/22 职场文书
2015年秋学期师德师风建设工作总结
2015/10/23 职场文书
mysql联合索引的使用规则
2021/06/23 MySQL