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 option删除代码集合
Nov 12 Javascript
写出更好的JavaScript程序之undefined篇(中)
Nov 23 Javascript
javascript制作的cookie封装及使用指南
Jan 02 Javascript
jquery插件pagination实现无刷新ajax分页
Sep 30 Javascript
基于JS实现的笛卡尔乘积之商品发布
May 13 Javascript
vue.js获取数据库数据实例代码
May 26 Javascript
BootStrap 标题设置跨行无效的解决方法
Oct 25 Javascript
Vue父子模版传值及组件传值的三种方法
Nov 27 Javascript
深入剖析Node.js cluster模块
May 23 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
Apr 15 Javascript
VsCode与Node.js知识点详解
Sep 05 Javascript
vue-cli3单页构建大型项目方案
Apr 07 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
星际原理概述
2020/03/04 星际争霸
php IP及IP段进行访问限制的代码
2008/12/17 PHP
yii2控制器Controller Ajax操作示例
2016/07/23 PHP
thinkPHP5实现的查询数据库并返回json数据实例
2017/10/23 PHP
jquery中ajax调用json数据的使用说明
2011/03/17 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
2013/04/15 Javascript
js Map List 遍历使用示例
2013/07/10 Javascript
jQuery中contents()方法用法实例
2015/01/08 Javascript
jQuery animate easing使用方法图文详解
2016/06/17 Javascript
js字符串引用的两种方式(必看)
2016/09/18 Javascript
jquery+ajax实现省市区三级联动效果简单示例
2017/01/04 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
2017/03/03 Javascript
关于vue-resource报错450的解决方案
2017/07/24 Javascript
Angular将填入表单的数据渲染到表格的方法
2017/09/22 Javascript
JS实现自定义状态栏动画文字效果示例
2017/10/12 Javascript
ES6学习笔记之map、set与数组、对象的对比
2018/03/01 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
2019/01/24 Javascript
JavaScript递归函数定义与用法实例分析
2019/01/24 Javascript
TypeScript之调用栈的实现
2019/12/31 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
2021/02/23 Vue.js
[06:10]6.81新信使新套装!给你一个炫酷的DOTA2
2014/05/06 DOTA
Python中列表的一些基本操作知识汇总
2015/05/20 Python
磁盘垃圾文件清理器python代码实现
2020/08/24 Python
基于python 二维数组及画图的实例详解
2018/04/03 Python
python 自动重连wifi windows的方法
2018/12/18 Python
python使用thrift教程的方法示例
2019/03/21 Python
Django处理Ajax发送的Get请求代码详解
2019/07/29 Python
Django自定义全局403、404、500错误页面的示例代码
2020/03/08 Python
python 使用paramiko模块进行封装,远程操作linux主机的示例代码
2020/12/03 Python
全面介绍python中很常用的单元测试框架unitest
2020/12/14 Python
华为旗下电子商务平台:华为商城
2016/08/06 全球购物
小学教师学期末自我评价
2013/09/25 职场文书
大学新生欢迎词
2014/01/10 职场文书
个人租房协议书范本
2014/09/30 职场文书
2016年校园社会综合治理宣传月活动总结
2016/03/16 职场文书
导游词之青岛太清宫
2019/12/13 职场文书