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下利用控制器载入对应脚本
Jul 17 Javascript
js替代copy(示例代码)
Nov 27 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
Sep 04 Javascript
jQuery遍历json的方法(推荐)
Jun 12 Javascript
关于原生js中bind函数的简单实现
Aug 10 Javascript
全面解析Node.js 8 重要功能和修复
Jun 02 Javascript
javascript计算对象长度的方法
Oct 25 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
Nov 27 Javascript
如何在vue里添加好看的lottie动画
Aug 02 Javascript
layui table 多行删除(id获取)的方法
Sep 12 Javascript
vue中监听路由参数的变化及方法
Dec 06 Javascript
vue中如何添加百度统计代码
Dec 19 Vue.js
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
php5 apache 2.2 webservice 创建与配置(java)
2011/01/27 PHP
PHP中strtotime函数使用方法分享
2012/01/10 PHP
使用php实现快钱支付功能(涉及到接口)
2013/07/01 PHP
将CMYK颜色值和RGB颜色相互转换的PHP代码
2014/07/28 PHP
JS 图片缩放效果代码
2010/06/09 Javascript
jquery.validate使用攻略 第五步 正则验证
2010/07/01 Javascript
JavaScript 验证码的实例代码(附效果图)
2013/03/22 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
2013/07/02 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
2015/06/24 Javascript
JavaScript判断按钮被点击的方法
2015/12/13 Javascript
bootstrap css样式之表单
2017/01/19 Javascript
基于JQuery及AJAX实现名人名言随机生成器
2017/02/10 Javascript
浅析node.js的模块加载机制
2018/05/25 Javascript
微信小程序实现圆形进度条动画
2020/11/18 Javascript
Python 文件操作实现代码
2009/10/07 Python
Python中Collection的使用小技巧
2014/08/18 Python
Python构建网页爬虫原理分析
2017/12/19 Python
python学生信息管理系统(完整版)
2020/04/05 Python
python图像和办公文档处理总结
2019/05/28 Python
python 默认参数相关知识详解
2019/09/18 Python
详解python常用命令行选项与环境变量
2020/02/20 Python
压铸汽车模型收藏家:Diecastmodelswholesale.com
2016/12/21 全球购物
39美元购买一副眼镜或太阳镜:39DollarGlasses.com
2018/06/17 全球购物
俄罗斯领先的移动和数字设备在线商店:Svyaznoy.ru
2020/12/21 全球购物
采购员岗位职责
2013/11/15 职场文书
大学生军训自我鉴定
2014/02/12 职场文书
法制宣传教育方案
2014/05/09 职场文书
测绘工程专业求职信
2014/07/15 职场文书
好人好事演讲稿
2014/09/01 职场文书
高中校园广播稿
2014/10/21 职场文书
2014年建筑工程工作总结
2014/12/03 职场文书
表扬通报怎么写
2015/01/16 职场文书
病人慰问信范文
2015/02/15 职场文书
物业公司管理制度
2015/08/05 职场文书
python3操作redis实现List列表实例
2021/08/04 Python
DIY胆机必读:各国电子管评价
2022/04/06 无线电