js实现精确到毫秒的倒计时效果


Posted in Javascript onAugust 05, 2016

本文实例为大家分享了精确到毫秒的倒计时效果,供大家参考,具体内容如下

<!DOCTYPE html>
<html>

 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 <title></title>
 <style>
  div{
  width: 100%;
  height: 50px;
  margin-bottom: 5px;
  background: yellowgreen;
  }
 </style>
 </head>

 <body>
 
 <h2>毫秒的倒计时</h2>
 <div id="timer1"></div>
 <div id="timer2"></div>
 <div id="timer3"></div>
 <div id="timer4"></div>
 <script>
  var addTimer = function(){
  var list = [],
   interval;
   
  return function(id,timeStamp){
   if(!interval){
   interval = setInterval(go,1);
   }
   list.push({ele:document.getElementById(id),time:timeStamp});
  }
  
  function go() { 
   for (var i = 0; i < list.length; i++) { 
   list[i].ele.innerHTML = changeTimeStamp(list[i].time); 
   if (!list[i].time) 
    list.splice(i--, 1); 
   } 
  }

  //传入unix时间戳,得到倒计时
  function changeTimeStamp(timeStamp){
   var distancetime = new Date(timeStamp*1000).getTime() - new Date().getTime();
   if(distancetime > 0){ 






//如果大于0.说明尚未到达截止时间  
   var ms = Math.floor(distancetime%1000);
   var sec = Math.floor(distancetime/1000%60);
   var min = Math.floor(distancetime/1000/60%60);
   var hour =Math.floor(distancetime/1000/60/60%24);
   
   if(ms<100){
    ms = "0"+ ms;
   }
   if(sec<10){
    sec = "0"+ sec;
   }
   if(min<10){
    min = "0"+ min;
   }
   if(hour<10){
    hour = "0"+ hour;
   }
   
   return hour + ":" +min + ":" +sec + ":" +ms;
   }else{







//若否,就是已经到截止时间了
   return "已截止!"
   } 
  }  
  }();
  
  addTimer("timer1",1451923200);//1月5日00点,unix时间戳自己去百度一下,就有的
  addTimer("timer2",1451926800);//1月5日01点
  addTimer("timer3",1451930400);//1月5日02点
  addTimer("timer4",1452020400);//1月6日03点

 </script>
 
 </body>

</html>

更多关于倒计时的文章请查看专题:《倒计时功能》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
Oct 23 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
Apr 17 Javascript
jQuery.extend()的实现方式详解及实例
Jun 29 Javascript
js的匿名函数使用介绍
Dec 11 Javascript
使用jQuery在对象中缓存选择器的简单方法
Jun 30 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
Jan 07 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
Aug 02 Javascript
JS弹出窗口的运用与技巧大全
Nov 01 Javascript
JS+CSS3制作炫酷的弹窗效果
Nov 08 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
Nov 28 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
Mar 14 Javascript
小程序外卖订单界面的示例代码
Dec 30 Javascript
jQuery实现Select左右复制移动内容
Aug 05 #Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
Aug 05 #Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
Aug 05 #Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
Aug 05 #Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
Aug 05 #Javascript
使用HTML5+Boostrap打造简单的音乐播放器
Aug 05 #Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
Aug 05 #Javascript
You might like
php 面向对象的一个例子
2011/04/12 PHP
解析PHP无限级分类方法及代码
2013/06/21 PHP
PHP PDOStatement:bindParam插入数据错误问题分析
2013/11/13 PHP
php实现的错误处理封装类实例
2017/06/20 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
PHP使用file_get_contents发送http请求功能简单示例
2018/04/29 PHP
基于jquery的图片的切换(以数字的形式)
2011/02/14 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
2013/03/04 Javascript
jqplot通过ajax动态画折线图的方法及思路
2013/12/08 Javascript
node.js中的http.response.write方法使用说明
2014/12/14 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
2015/10/21 Javascript
Javascript闭包实例详解
2015/11/29 Javascript
vue2.0获取自定义属性的值
2017/03/28 Javascript
Angular 4依赖注入学习教程之Injectable装饰器(六)
2017/06/04 Javascript
在HTML文档中嵌入JavaScript的四种方法
2018/05/07 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
2019/09/23 Javascript
Python 流程控制实例代码
2009/09/25 Python
Python使用sorted对字典的key或value排序
2018/11/15 Python
python中的列表与元组的使用
2019/08/08 Python
python Kmeans算法原理深入解析
2019/08/23 Python
python装饰器相当于函数的调用方式
2019/12/27 Python
解析python 中/ 和 % 和 //(地板除)
2020/06/28 Python
如何使用PyCharm引入需要使用的包的方法
2020/09/22 Python
Python getsizeof()和getsize()区分详解
2020/11/20 Python
Myprotein中国网站:欧洲畅销运动营养品牌
2021/02/11 全球购物
某科技软件测试面试题
2013/05/19 面试题
运动会开幕式邀请函
2014/01/22 职场文书
试用期员工考核制度
2014/01/22 职场文书
小学教师自我鉴定范文
2014/03/20 职场文书
药剂专业毕业生求职信
2014/06/24 职场文书
2014年实验室工作总结
2014/12/03 职场文书
单独二胎证明
2015/06/24 职场文书
开业庆典嘉宾致辞
2015/08/01 职场文书
超市啤酒狂欢夜策划方案范文!
2019/07/03 职场文书
Golang标准库syscall详解(什么是系统调用)
2021/05/25 Golang
docker-compose部署Yapi的方法
2022/04/08 Servers