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 URL编码和解码使用说明
Apr 12 Javascript
JS 操作符整理[推荐收藏]
Nov 15 Javascript
window.print打印指定div实例代码
Dec 13 Javascript
jquery的clone方法应用于textarea和select的bug修复
Jun 26 Javascript
jQuery验证插件validation使用指南
Apr 21 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
Aug 24 Javascript
关于原生js中bind函数的简单实现
Aug 10 Javascript
关于Vue在ie10下空白页的debug小结
May 02 Javascript
详解vue-cli 脚手架 安装
Apr 16 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
Nov 13 Javascript
js实现点击按钮随机生成背景颜色
Sep 05 Javascript
js重写alert事件(避免alert弹框标题出现网址)
Dec 04 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/12/29 PHP
thinkphp在php7环境下提示Cannot use ‘String’ as class name as it is reserved的解决方法
2016/09/30 PHP
PHP 配置后台登录以及模板引入
2017/01/24 PHP
JQuery 入门实例1
2009/06/25 Javascript
jquery中ajax学习笔记一
2011/10/16 Javascript
基于jquery跨浏览器显示的file上传控件
2011/10/24 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
2013/02/02 Javascript
jQuery中的编程范式详解
2014/12/15 Javascript
浅谈JavaScript正则表达式分组匹配
2015/04/10 Javascript
jquery插件splitScren实现页面分屏切换模板特效
2015/06/16 Javascript
js实现三张图(文)片一起切换的banner焦点图
2015/08/25 Javascript
javascript正则表达式模糊匹配IP地址功能示例
2017/01/06 Javascript
Vue 仿百度搜索功能实现代码
2017/02/16 Javascript
jQuery实现可拖动进度条实例代码
2017/06/21 jQuery
Angularjs上传文件组件flowjs功能
2017/08/07 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
2018/02/23 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
微信小程序实现两个页面传值的方法分析
2018/12/11 Javascript
vue3.0+vue-router+element-plus初实践
2020/12/02 Vue.js
[03:39]2015国际邀请赛主赛事首日精彩回顾
2015/08/05 DOTA
Python与Redis的连接教程
2015/04/22 Python
[原创]教女朋友学Python(一)运行环境搭建
2017/11/29 Python
python selenium 执行完毕关闭chromedriver进程示例
2019/11/15 Python
Python zip函数打包元素实例解析
2019/12/11 Python
Django ORM实现按天获取数据去重求和例子
2020/05/18 Python
python使用scapy模块实现ARP扫描的过程
2021/01/21 Python
台湾深度自由行旅游平台:Tripbaa趣吧
2017/10/10 全球购物
PAUL HEWITT手表美国站:德国北部时尚生活配饰品牌,船锚元素
2017/11/18 全球购物
索尼巴西商店:Sony巴西
2019/06/21 全球购物
波兰多品牌运动商店:StreetStyle24.pl
2020/09/22 全球购物
造价工程师个人求职信
2013/09/21 职场文书
上级检查欢迎词
2014/01/18 职场文书
总经理岗位职责描述
2014/02/08 职场文书
听课评语大全
2014/04/30 职场文书
一份文言文检讨书
2014/09/13 职场文书
高中教师个人工作总结
2015/02/10 职场文书