多个js毫秒倒计时同时进行效果


Posted in Javascript onJanuary 05, 2016

本文实例讲解js毫秒倒计时同时进行效果的代码,分享给大家供大家参考,具体内容如下

实现功能:调用一个函数,传入html元素的id,和一个截止时间(unix时间戳),在该html元素中打印出到当前到截止时间为止的倒计时,精确到毫秒;

效果图如下:

多个js毫秒倒计时同时进行效果

<!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>

如何使用这个函数?

addTimer("#id",时间戳int); 

PS:

其实这个函数有一个小小的问题:就是并不会显示截止天数;因为老板表示我们的倒计时时间最多也就几个小时,所以在判断倒计时的小时和天数上,我也就懒得写那么多了。所以如果传入的时间戳距今超过了1天。那么你会看到如此结果:02:11:32:874~~只剩2个小时了!明显不对是不是?

so,有2个方案这里:

方法1:把var hour =Math.floor(distancetime/1000/60/60%24);改成var hour =Math.floor(distancetime/1000/60/60);

如果截止时间距今超出一天了,小时位置会显示大于24的数字;比如:36:45:22:888

方法2:你自己再写一个计算天数的变量;

更多关于倒计时的文章请查看专题:《倒计时功能》

更多JavaScript时钟特效点击查看:JavaScript时钟特效专题

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
zTree插件之多选下拉菜单实例代码
Nov 06 Javascript
javascript检测是否联网的实现代码
Sep 28 Javascript
js事件源window.event.srcElement兼容性写法(详解)
Nov 25 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
Jan 13 Javascript
Node.js与Sails redis组件的使用教程
Feb 14 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
Feb 18 Javascript
Vue项目webpack打包部署到服务器的实例详解
Jul 17 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
Jul 17 Javascript
Node.js自定义实现文件路由功能
Sep 22 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
Sep 30 Javascript
微信小程序时间轴实现方法示例
Jan 14 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
Apr 16 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
Jan 04 #Javascript
实例详解jQuery结合GridView控件的使用方法
Jan 04 #Javascript
jQuery EasyUI之DataGrid使用实例详解
Jan 04 #Javascript
JavaScript原型及原型链终极详解
Jan 04 #Javascript
jQuery实现简单的点赞效果
May 29 #Javascript
jQuery+Ajax实现无刷新操作
Jan 04 #Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
Jan 04 #Javascript
You might like
让的PHP代码飞起来的40条小技巧(提升php效率)
2010/04/12 PHP
怎样使用php与jquery设置和读取cookies
2013/08/08 PHP
PHP获取当前执行php文件名的代码
2017/03/02 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
PHP操作Postgresql封装类与应用完整实例
2018/04/24 PHP
向fckeditor编辑器插入指定代码的方法
2007/05/25 Javascript
JS写的数字拼图小游戏代码[学习参考]
2008/10/29 Javascript
基于jquery插件实现常见的幻灯片效果
2013/11/01 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
2015/01/29 Javascript
JS模拟键盘打字效果的方法
2015/08/05 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
2017/01/13 Javascript
Angularjs 与 bower安装和使用详解
2017/05/11 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
2017/06/30 Javascript
vue watch深度监听对象实现数据联动效果
2018/08/16 Javascript
详解vue的双向绑定原理及实现
2019/05/05 Javascript
[03:57]DOTA2英雄梦之声_第03期_幻影刺客
2014/06/21 DOTA
[01:31]DOTA2上海特级锦标赛 SECRET战队完整宣传片
2016/03/16 DOTA
[01:28:24]NAVI vs VG Supermajor 败者组 BO3 第三场 6.5
2018/06/06 DOTA
Python3通过Luhn算法快速验证信用卡卡号的方法
2015/05/14 Python
Python中利用sqrt()方法进行平方根计算的教程
2015/05/15 Python
Python聚类算法之DBSACN实例分析
2015/11/20 Python
python实现获取Ip归属地等信息
2016/08/27 Python
深入理解Python中的*重复运算符
2017/10/28 Python
Pytorch中accuracy和loss的计算知识点总结
2019/09/10 Python
tensorflow实现残差网络方式(mnist数据集)
2020/05/26 Python
新版Pycharm中Matplotlib不会弹出独立的显示窗口的问题
2020/06/02 Python
Jacadi Paris美国官方网站:法国童装品牌
2017/10/15 全球购物
利达恒信公司.NET笔试题面试题
2016/03/05 面试题
科研课题实施方案
2014/03/18 职场文书
毕业生应聘求职信
2014/07/10 职场文书
骨干教师考核评语
2014/12/31 职场文书
检讨书怎么写
2015/01/23 职场文书
项目投资意向书范本
2015/05/09 职场文书
离婚起诉书范文2015
2015/05/19 职场文书
Css预编语言及区别详解
2021/04/25 HTML / CSS
浅谈JS和Nodejs中的事件驱动
2021/05/05 NodeJs