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中的数学函数集合
May 08 Javascript
js和jquery批量绑定事件传参数一(新猪猪原创)
Jun 23 Javascript
jsp网页搜索结果中实现选中一行使其高亮
Feb 17 Javascript
Javascript 数组排序详解
Oct 22 Javascript
Jquery时间轴特效(三种不同类型)
Nov 02 Javascript
纯js代码制作的网页时钟特效【附实例】
Mar 30 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
Jun 01 Javascript
Vue.use源码学习小结
Jun 20 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
Jul 20 Javascript
layui的面包屑或者表单不显示的解决方法
Sep 05 Javascript
Vue父组件向子组件传值以及data和props的区别详解
Mar 02 Javascript
node.js爬虫框架node-crawler初体验
Oct 29 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
中英文字符串翻转函数
2008/12/09 PHP
PHP安装memcached扩展笔记
2015/05/28 PHP
深入理解PHP原理之执行周期分析
2016/06/01 PHP
php实现PDO中捕获SQL语句错误的方法
2017/02/16 PHP
PHP获取redis里不存在的6位随机数应用示例【设置24小时过时】
2017/06/07 PHP
Laravel 5.4向IoC容器中添加自定义类的方法示例
2017/08/15 PHP
Laravel框架基于ajax实现二级联动功能示例
2019/01/17 PHP
Laravel 5.2 文档 数据库 ―― 起步介绍
2019/10/21 PHP
一个不错的应用,用于提交获取文章内容,不推荐用
2007/03/03 Javascript
JavaScript 学习笔记(十四) 正则表达式
2010/01/22 Javascript
JavaScript 创建运动框架的实现代码
2013/05/08 Javascript
Javascript动态创建div的方法
2015/02/09 Javascript
AngularJS  $modal弹出框实例代码
2016/08/24 Javascript
使用ES6语法重构React代码详解
2017/05/09 Javascript
JS开发中基本数据类型具体有哪几种
2017/10/19 Javascript
浅谈vue-router2路由参数注意的问题
2017/11/08 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
2018/07/13 jQuery
使用jQuery给Table动态增加行、清空table的方法
2018/09/05 jQuery
vue鼠标悬停事件实例详解
2019/04/01 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
2019/06/17 Javascript
js实现ajax的用户简单登入功能
2020/06/18 Javascript
Python中列表与元组的乘法操作示例
2018/02/10 Python
python3.x实现base64加密和解密
2019/03/28 Python
在Python函数中输入任意数量参数的实例
2019/07/16 Python
python函数参数(必须参数、可变参数、关键字参数)
2019/08/16 Python
Python Selenium库的基本使用教程
2021/01/04 Python
英国领先的露营和露营车品牌之一:OLPRO
2019/08/06 全球购物
委托与事件是什么关系?为什么要使用委托
2014/04/18 面试题
考试诚信承诺书
2014/05/23 职场文书
关于读书的演讲稿1000字
2014/08/27 职场文书
2014年政风行风自查自纠报告
2014/10/21 职场文书
实习班主任自我评价
2015/03/11 职场文书
业务员管理制度范本
2015/08/06 职场文书
2016春节放假通知范文
2015/08/18 职场文书
教你怎么用Python监控愉客行车程
2021/04/29 Python
logback如何自定义日志存储
2021/08/30 Java/Android