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代码
Jun 27 Javascript
javascript 动态添加事件代码
Nov 30 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
Sep 17 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
Jun 12 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
Aug 02 Javascript
jQuery视差滚动效果网页实现方法经验总结
Sep 29 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
Dec 07 Javascript
详解javascript获取url信息的常见方法
Dec 19 Javascript
微信小程序  http请求封装详解及实例代码
Feb 15 Javascript
Vue Spa切换页面时更改标题的实例代码
Jul 15 Javascript
基于JQuery实现页面定时弹出广告
May 08 jQuery
利用JS判断元素是否为数组的方法示例
Jan 08 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 杂谈《重构-改善既有代码的设计》之一 重新组织你的函数
2012/04/09 PHP
Drupal简体中文语言包安装教程
2014/09/27 PHP
Laravel 5.0 发布 新版本特性详解
2015/02/10 PHP
php出租房数据管理及搜索页面
2017/05/23 PHP
学习YUI.Ext基础第一天
2007/03/10 Javascript
原生javascript图片自动或手动切换示例附演示源码
2013/09/04 Javascript
js拖拽一些常见的思路方法整理
2014/03/19 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
2015/10/27 Javascript
自己动手写的javascript前端等待控件
2015/10/30 Javascript
jQuery语法小结(超实用)
2015/12/31 Javascript
模仿password输入框的实现代码
2016/06/07 Javascript
利用Bootstrap实现表格复选框checkbox全选
2016/12/21 Javascript
vue.js element-ui validate中代码不执行问题解决方法
2017/12/18 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
2018/12/24 Javascript
vue模块移动组件的实现示例
2020/05/20 Javascript
JS实现电脑虚拟键盘的操作
2020/06/24 Javascript
如何使用JS console.log()技巧提高工作效率
2020/10/14 Javascript
Python函数的周期性执行实现方法
2016/08/13 Python
《Python学习手册》学习总结
2018/01/17 Python
好的Python培训机构应该具备哪些条件
2018/05/23 Python
python中单下划线_的常见用法总结
2018/07/10 Python
python3.7+selenium模拟淘宝登录功能的实现
2020/05/26 Python
Python操作dict时避免出现KeyError的几种解决方法
2020/09/20 Python
美国标志性加大尺码时装品牌:Ashley Stewart
2016/12/15 全球购物
美国零售商店:Blue&Cream
2017/04/07 全球购物
孕妇内衣和胸罩:Cake Maternity
2018/07/16 全球购物
Java的五个基础面试题
2016/02/26 面试题
文秘专业自荐信
2013/10/14 职场文书
求职简历中个人的自我评价
2013/12/01 职场文书
户外用品商店创业计划书
2014/01/29 职场文书
元旦获奖感言
2014/03/08 职场文书
销售团队获奖感言
2014/08/14 职场文书
社区护士演讲稿
2014/08/27 职场文书
县长“四风”对照检查材料思想汇报
2014/10/05 职场文书
作文之亲情600字
2019/09/23 职场文书
Vue深入理解插槽slot的使用
2022/08/05 Vue.js