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 相关文章推荐
dojo 之基础篇(三)之向服务器发送数据
Mar 24 Javascript
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
Dec 27 Javascript
jquery 最简单易用的表单验证插件
Feb 27 Javascript
javascript Array.prototype.slice使用说明
Oct 11 Javascript
js随机生成网页背景颜色的方法
Feb 26 Javascript
JavaScript必知必会(六) delete in instanceof
Jun 08 Javascript
走进javascript——不起眼的基础,值和分号
Feb 24 Javascript
详解Vue如何支持JSX语法
Nov 10 Javascript
关于axios如何全局注册浅析
Jan 14 Javascript
Vue点击切换颜色的方法
Sep 13 Javascript
vue+springboot图片上传和显示的示例代码
Feb 14 Javascript
vue中keep-alive、activated的探讨和使用详解
Jul 26 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数组去重的函数代码
2013/02/03 PHP
深入理解require与require_once与include以及include_once的区别
2013/06/05 PHP
PHP CURL 多线程操作代码实例
2015/05/13 PHP
php使用timthumb生成缩略图的方法
2016/01/22 PHP
php实现微信扫码自动登陆与注册功能
2016/09/22 PHP
jquery 插件学习(三)
2012/08/06 Javascript
js 限制input只能输入数字、字母和汉字等等
2013/12/18 Javascript
利用进制转换压缩数字函数分享
2014/01/02 Javascript
jquery实现当滑动到一定位置时固定效果
2014/06/17 Javascript
jQuery CSS()方法改变现有的CSS样式
2014/08/20 Javascript
5种处理js跨域问题方法汇总
2014/12/04 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
2015/05/04 Javascript
JS实现的页面自定义滚动条效果
2015/10/26 Javascript
js实现上传图片及时预览
2016/05/07 Javascript
基于jquery实现最简单的选项卡切换效果
2016/05/08 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
2016/05/17 Javascript
js学习笔记之事件处理模型
2016/10/31 Javascript
JavaScript实现三级联动菜单效果
2017/08/16 Javascript
详解nodejs 开发企业微信第三方应用入门教程
2019/03/12 NodeJs
JS中间件设计模式的深入探讨与实例分析
2020/04/11 Javascript
vue修改Element的el-table样式的4种方法
2020/09/17 Javascript
详解python string类型 bytes类型 bytearray类型
2017/12/16 Python
python正则表达式爬取猫眼电影top100
2018/02/24 Python
Python实现动态添加属性和方法操作示例
2018/07/25 Python
python石头剪刀布小游戏(三局两胜制)
2021/01/20 Python
Python Pandas对缺失值的处理方法
2019/09/27 Python
Python基础之高级变量类型实例详解
2020/01/03 Python
python属于跨平台语言码
2020/06/09 Python
Trina Turk官网:美国时装和泳装品牌
2018/06/10 全球购物
Linux Interview Questions For software testers
2012/06/02 面试题
中学生国旗下讲话稿
2014/04/26 职场文书
七一建党节演讲稿
2014/09/11 职场文书
学习十八大演讲稿
2014/09/15 职场文书
继承公证书格式
2015/01/26 职场文书
MySQL千万级数据表的优化实战记录
2021/08/04 MySQL
开发微信小程序之WXSS样式教程
2022/04/18 HTML / CSS