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 相关文章推荐
js数组转json并在后台对其解析具体实现
Nov 20 Javascript
js完美的div拖拽实例代码
Jan 22 Javascript
jQuery中detach()方法用法实例
Dec 25 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
Mar 10 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
Mar 31 Javascript
CSS3实现动态背景登录框的代码
Jul 28 Javascript
Node.js编写组件的三种实现方式
Feb 25 Javascript
AngularJS基础 ng-options 指令详解
Aug 02 Javascript
实例解析jQuery中如何取消后续执行内容
Dec 01 Javascript
ECMAScript6 新特性范例大全
Mar 24 Javascript
详解浏览器缓存和webpack缓存配置
Jul 06 Javascript
JS实现数据动态渲染的竖向步骤条
Jun 24 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
DC四月将推出百页特刊漫画 纪念小丑诞生80周年
2020/04/09 欧美动漫
自动跳转中英文页面
2006/10/09 PHP
利用PHP获取网站访客的所在地位置
2017/01/18 PHP
php框架知识点的整理和补充
2021/03/01 PHP
jquery 模式对话框终极版实现代码
2009/09/28 Javascript
心扬JS分页函数代码
2010/09/10 Javascript
滚动图片效果 jquery实现回旋滚动效果
2013/01/08 Javascript
自己写了一个展开和收起的多更能型的js效果
2013/03/05 Javascript
eclipse如何忽略js文件报错(附图)
2013/10/30 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
2016/08/01 Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
2016/09/27 Javascript
jQuery中Chosen三级联动功能实例代码
2017/03/07 Javascript
bootstrap fileinput实现文件上传功能
2017/08/23 Javascript
elementUI中Table表格问题的解决方法
2018/12/04 Javascript
React实现轮播效果
2020/08/25 Javascript
JavaScript实现页面高亮操作提示和蒙板
2021/01/04 Javascript
Python脚本判断 Linux 是否运行在虚拟机上
2015/04/25 Python
Python字符串格式化
2015/06/15 Python
Python Socket编程详细介绍
2017/03/23 Python
Python使用正则表达式抓取网页图片的方法示例
2017/04/21 Python
简单谈谈python中的lambda表达式
2018/01/19 Python
Python装饰器实现方法及应用场景详解
2020/03/26 Python
解决python执行较大excel文件openpyxl慢问题
2020/05/15 Python
OpenCV4.1.0+VS2017环境配置的方法步骤
2020/07/09 Python
PyQt5 QDockWidget控件应用详解
2020/08/12 Python
python的setattr函数实例用法
2020/12/16 Python
一款纯css3实现的鼠标经过按钮特效教程
2014/11/09 HTML / CSS
Html5 localStorage入门教程
2018/04/26 HTML / CSS
男女时尚与复古风格在线购物:RoseGal(全球免费送货)
2017/07/19 全球购物
外贸业务员求职自荐信分享
2013/09/21 职场文书
快餐公司创业计划书
2014/04/29 职场文书
大二学生学年自我鉴定
2014/09/12 职场文书
2014最新实习证明模板
2014/10/02 职场文书
医学专业大学生职业生涯规划书
2014/10/25 职场文书
基于Redis位图实现用户签到功能
2021/05/08 Redis
JS实现简单的九宫格抽奖
2022/06/28 Javascript