js实现一个页面多个倒计时的3种方法

更新时间：2019年02月25日 10:36:30 作者：梦幻飞雪

这篇文章主要为大家详细介绍了js实现一个页面多个倒计时的3种方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js实现一个页面多个倒计时的具体代码，供大家参考，具体内容如下

说明：方法1，方法二是基础原理版，方法三升级版（参考for循环，定时器，闭包混合一块的那点事。）

方法一：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>倒计时</title>
</head>
<body> 
 
 <div id="timer1" style="color:red"></div> 
 <div id="timer2" style="color:red"></div> 

</body> 
<script> 
 function countDown( maxtime,fn ) {  
  var timer = setInterval(function() { 
    if( !!maxtime ){  
     var day = Math.floor(maxtime / 86400),
     hour = Math.floor((maxtime % 86400) / 3600),
    minutes = Math.floor((maxtime % 3600) / 60), 
    seconds = Math.floor(maxtime%60), 
    msg = "距离结束还有"+day+"天"+hour+"时"+minutes+"分"+seconds+"秒";  
    fn( msg ); 
    --maxtime;  
   } else {  
    clearInterval( timer ); 
    fn("时间到，结束!"); 
   }  
  }, 1000); 
 } 
 countDown( 86,function( msg ) { 
  document.getElementById('timer1').innerHTML = msg; 
 }) 
 countDown( 86400,function( msg ) { 
  document.getElementById('timer2').innerHTML = msg; 
 }) 
</script> 
</html>

方法二：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>倒计时</title>
</head>
<body> 
 <div id="timer1"></div> 
 <div id="timer2"></div> 
 <div id="timer3"></div> 
</body> 
<script type="text/javascript"> 
 
 var addTimer = function () { 
  var list = [], 
   interval; 
 
  return function (id, time) { 
   if (!interval) 
    interval = setInterval(go, 1000); 
   list.push({ ele: document.getElementById(id), time: time }); 
  } 
 
  function go() { 
   for (var i = 0; i < list.length; i++) { 
    list[i].ele.innerHTML = getTimerString(list[i].time ? list[i].time -= 1 : 0); 
    if (!list[i].time) 
     list.splice(i--, 1); 
   } 
  } 
 
  function getTimerString(time) { 
   var not0 = !!time, 
    d = Math.floor(time / 86400), 
    h = Math.floor((time %= 86400) / 3600), 
    m = Math.floor((time %= 3600) / 60), 
    s = time % 60; 
   if (not0) 
    return "还有" + d + "天" + h + "小时" + m + "分" + s + "秒"; 
   else return "时间到"; 
  } 
 } (); 
 
 addTimer("timer1", 12); 
 addTimer("timer2", 10); 
 addTimer("timer3", 13); 
</script> 
</html>

方法三：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>倒计时</title>
</head>
<body> 
 
 <div id="timer0" style="color:red"></div> 
 <div id="timer1" style="color:red"></div> 
 <div id="timer2" style="color:red"></div>
</body> 
<script> 
 function countDown( maxtime,fn ) {  
  var timer = setInterval(function() { 
    if( !!maxtime ){  
     var day = Math.floor(maxtime / 86400),
     hour = Math.floor((maxtime % 86400) / 3600),
    minutes = Math.floor((maxtime % 3600) / 60), 
    seconds = Math.floor(maxtime%60), 
    msg = "距离结束还有"+day+"天"+hour+"时"+minutes+"分"+seconds+"秒";  
    fn( msg ); 
    --maxtime;  
   } else {  
    clearInterval( timer ); 
    fn("时间到，结束!"); 
   }  
  }, 1000); 
 } 
 var aTime = [3600,3800,3900];
 for ( var i = 0; i < 3; i++ ) {
  (function (i) {
   var obj = 'timer' + i;
   countDown( aTime[i],function( msg ) { 
    document.getElementById(obj).innerHTML = msg; 
   }) 
  })(i)
 }
  
 
</script> 
</html>

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

js
倒计时

详解JavaScript之ES5的继承
这篇文章主要介绍了JavaScript之ES5的继承的相关资料，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下
2020-07-07
JS小知识之如何将CSV转换为JSON字符串
CSV文件一般是以逗号为分隔值的文件(Comma-Separated Values,CSV,有时也称为字符分隔值,因为分隔字符也可以不是逗号),其文件以纯文本形式存储表格数据(数字和文本),下面这篇文章主要给大家介绍了JS小知识之如何将CSV转换为JSON字符串的相关资料,需要的朋友可以参考下
2023-06-06
ECharts柱状图关闭鼠标hover时的高亮样式详解
为了方便使用,echarts的饼图中给加入了默认的hover高亮效果,下面这篇文章主要给大家介绍了关于ECharts柱状图关闭鼠标hover时的高亮样式的相关资料,需要的朋友可以参考下
2023-04-04
弱类型语言javascript中 a,b 的运算实例小结
这篇文章主要介绍了弱类型语言javascript中 a,b 的运算,结合实例形式总结分析了js闭包函数中布尔值与字符串的a，b运算相关操作技巧,需要的朋友可以参考下
2019-08-08
微信小程序实现tab点击切换
这篇文章主要为大家详细介绍了微信小程序实现tab点击切换，不滑动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
js实现3D照片墙效果
这篇文章主要介绍了js实现3D照片墙效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-10-10
JS Pro-深入面向对象的程序设计之继承的详解
一般的面向对象程序语言，有两种继承方法——接口继承（interface inheritance）和实现继承（implementation inheritance）。接口继承只继承方法签名，而实现继承则继承实际的方法。在JavaScript中，函数没有签名，所以在JavaScript只支持实现继承，而且主要是依靠原型链（prototype chaining）来是实现的
2013-05-05
Ionic快速安装教程
Ionic 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序，它提供了很多 UI 组件来帮助开发者开发强大的应用。接下来小编给大家介绍如何安装 Ionic 在自己的电脑上搭建一个简单的小应用，感兴趣的朋友一起看看吧
2016-06-06
使用JavaScript实现一个拖拽缩放效果
这篇文章主要介绍了如何使用JS实现一个这样的拖拽缩放效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-05-05
ECharts formatter属性设置的3种方法(字符串模板,函数模板,回调函数)
formatter有两种写法,一种字符串模板,另一种是回调函数,下面这篇文章主要给大家介绍了关于ECharts formatter属性设置的3种方法,分别是字符串模板,函数模板,回调函数,需要的朋友可以参考下
2023-02-02