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代码 var ie = !-[1,] 最短的IE判定代码
May 28 Javascript
Javascript浅谈之引用类型
Dec 18 Javascript
轻松实现Bootstrap图片轮播
Apr 20 Javascript
详解JavaScript常量定义
Jan 03 Javascript
jQuery表单插件ajaxForm实例详解
Jan 17 Javascript
简单谈谈关于 npm 5.0 的新坑
Jun 08 Javascript
在vue项目中,使用axios跨域处理
Mar 07 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
Feb 15 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
Mar 07 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
Oct 18 Javascript
Vue 实现拨打电话操作
Nov 16 Javascript
jquery实现广告上下滚动效果
Mar 04 jQuery
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实现单例模式最安全的做法
2014/06/13 PHP
php准确计算复活节日期的方法
2015/04/18 PHP
ThinkPHP表单数据智能写入create方法实例分析
2015/09/27 PHP
DEDE实现转跳属性文档在模板上调用出转跳地址
2016/11/04 PHP
PHP get_html_translation_table()函数用法讲解
2019/02/16 PHP
在JavaScript中,为什么要尽可能使用局部变量?
2009/04/06 Javascript
js中查找最近的共有祖先元素的实现代码
2010/12/30 Javascript
浅谈JavaScript编程语言的编码规范
2011/10/21 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
2013/05/07 Javascript
setinterval()与clearInterval()JS函数的调用方法
2015/01/21 Javascript
JavaScript将字符串转换成字符编码列表的方法
2015/03/19 Javascript
jQuery多级手风琴菜单实例讲解
2015/10/22 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
2017/05/02 Javascript
详解vue中组件参数
2018/07/09 Javascript
JavaScript中this关键字用法实例分析
2018/08/24 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
2018/12/03 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
2019/07/04 Javascript
JavaScript实现移动小精灵的案例代码
2020/12/12 Javascript
[02:02]特效爆炸!DOTA2珍宝之瓶待你开启
2018/08/21 DOTA
Python实现字典的key和values的交换
2015/08/04 Python
Python中logging.NullHandler 的使用教程
2018/11/29 Python
Python Pywavelet 小波阈值实例
2019/01/09 Python
python的pygal模块绘制反正切函数图像方法
2019/07/16 Python
python 常见的排序算法实现汇总
2020/08/21 Python
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
2018/07/12 HTML / CSS
世界最大域名注册商:GoDaddy
2016/07/24 全球购物
俄罗斯药房连锁店:ASNA
2020/06/20 全球购物
超市促销实习自我鉴定
2013/09/23 职场文书
十八届三中全会报告学习材料
2014/02/17 职场文书
高一学生评语大全
2014/04/25 职场文书
城管年度个人总结
2015/02/28 职场文书
新教师教学工作总结
2015/08/14 职场文书
2016年万圣节家长开放日活动总结
2016/04/05 职场文书
Python实现打乒乓小游戏
2021/09/25 Python
mysql的Buffer Pool存储及原理
2022/04/02 MySQL
MySQL数据库查询进阶之多表查询详解
2022/04/08 MySQL