多个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 相关文章推荐
页面使用密码保护代码
Apr 10 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
Jun 22 Javascript
JS小游戏之极速快跑源码详解
Sep 25 Javascript
bootstrap laydate日期组件使用详解
Jan 04 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
Jun 19 Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
Dec 26 Javascript
在vue中封装可复用的组件方法
Mar 01 Javascript
Node.js利用console输出日志文件的方法示例
Apr 27 Javascript
JavaScript学习笔记之图片库案例分析
Jan 08 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
Sep 04 Javascript
JS前端基于canvas给图片添加水印
Nov 11 Javascript
Vue 组件注册全解析
Dec 17 Vue.js
在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读取IMAP邮件
2006/10/09 PHP
免费的ip数据库淘宝IP地址库简介和PHP调用实例
2014/04/08 PHP
smarty中post用法实例
2014/11/28 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
2011/03/01 Javascript
33个优秀的 jQuery 图片展示插件分享
2012/03/14 Javascript
获取客户端电脑日期时间js代码(jquery)
2012/09/12 Javascript
Javascript中string转date示例代码
2013/11/01 Javascript
javascript右下角弹层及自动隐藏(自己编写)
2013/11/20 Javascript
php基于redis处理session的方法
2016/03/14 Javascript
搞定immutable.js详细说明
2016/05/02 Javascript
Ajax使用原生态JS验证用户名是否存在
2020/05/26 Javascript
原生js实现日期计算器功能
2017/02/17 Javascript
深入学习nodejs中的async模块的使用方法
2017/07/12 NodeJs
浅析Vue 和微信小程序的区别、比较
2018/08/03 Javascript
JS实现头条新闻的经典轮播图效果示例
2019/01/30 Javascript
使用node搭建自动发图文微博机器人的方法
2019/03/22 Javascript
Vue使用watch监听一个对象中的属性的实现方法
2019/05/10 Javascript
在Echarts图中给坐标轴加一个标识线markLine
2020/07/20 Javascript
python中virtualenvwrapper安装与使用
2018/05/20 Python
python使用opencv驱动摄像头的方法
2018/08/03 Python
python 利用for循环 保存多个图像或者文件的实例
2018/11/09 Python
Python3几个常见问题的处理方法
2019/02/26 Python
python的mysql数据库建立表与插入数据操作示例
2019/09/30 Python
python创建ArcGIS shape文件的实现
2019/12/06 Python
浅谈django channels 路由误导
2020/05/28 Python
Python定时任务APScheduler原理及实例解析
2020/05/30 Python
python drf各类组件的用法和作用
2021/01/12 Python
The North Face官方旗舰店:美国著名户外品牌
2020/09/28 全球购物
《颐和园》教学反思
2014/02/26 职场文书
党员对照检查剖析材料
2014/10/13 职场文书
小平小道观后感
2015/06/09 职场文书
2015中学教学工作总结
2015/07/22 职场文书
少先队大队委竞选口号
2015/12/25 职场文书
MySQL Shell的介绍以及安装
2021/04/24 MySQL
Python数据分析入门之数据读取与存储
2021/05/13 Python