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


Posted in Javascript onFebruary 25, 2019

本文实例为大家分享了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时钟特效专题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript getElementsByClassName函数
Apr 01 Javascript
用JSON做数据传输格式中的一些问题总结
Dec 21 Javascript
7个有用的jQuery代码片段分享
May 19 Javascript
javascript中offset、client、scroll的属性总结
Aug 13 Javascript
浅析jQuery中使用$所引发的问题
May 29 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
Jul 08 Javascript
Jquery-data的三种用法
Apr 18 jQuery
微信小程序实现下拉刷新和轮播图效果
Nov 21 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
Nov 22 Javascript
Vue中jsx不完全应用指南小结
Nov 01 Javascript
JS内置对象和Math对象知识点详解
Apr 03 Javascript
vue中keep-alive、activated的探讨和使用详解
Jul 26 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
Feb 25 #Javascript
写一个Vue Popup组件
Feb 25 #Javascript
利用Webpack实现小程序多项目管理的方法
Feb 25 #Javascript
JavaScript中构造函数与原型链之间的关系详解
Feb 25 #Javascript
JavaScript中的事件与异常捕获详析
Feb 24 #Javascript
Vue 组件注册实例详解
Feb 23 #Javascript
Vue Prop属性功能与用法实例详解
Feb 23 #Javascript
You might like
浅谈laravel中的关联查询with的问题
2019/10/10 PHP
laravel框架的安装与路由实例分析
2019/10/11 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
用roll.js实现的图片自动滚动+鼠标触动的特效
2007/03/18 Javascript
myEvent.js javascript跨浏览器事件框架
2011/10/24 Javascript
尝试在让script的type属性等于text/html
2013/01/15 Javascript
根据选择不同的下拉值出现相对应的文本输入框
2013/08/01 Javascript
ExtJS[Desktop]实现图标换行示例代码
2013/11/17 Javascript
js实现数字每三位加逗号的方法
2015/02/05 Javascript
深入理解bootstrap框架之入门准备
2016/10/09 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
2016/12/26 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
2018/09/18 Javascript
解决layui富文本编辑器图片上传无法回显的问题
2019/09/18 Javascript
python语音识别实践之百度语音API
2018/08/30 Python
Python上下文管理器用法及实例解析
2019/11/11 Python
基于python中__add__函数的用法
2019/11/25 Python
关于多元线性回归分析——Python&amp;SPSS
2020/02/24 Python
Django更新models数据库结构步骤
2020/04/01 Python
Python使用扩展库pywin32实现批量文档打印实例
2020/04/09 Python
Python unittest单元测试框架实现参数化
2020/04/29 Python
Python实现Keras搭建神经网络训练分类模型教程
2020/06/12 Python
django filter过滤器实现显示某个类型指定字段不同值方式
2020/07/16 Python
分布式全文检索引擎ElasticSearch原理及使用实例
2020/11/14 Python
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
2013/01/23 HTML / CSS
html5 video全屏播放/自动播放的实现示例
2020/08/06 HTML / CSS
社区母亲节活动记录
2014/03/06 职场文书
医学生毕业自我鉴定
2014/03/26 职场文书
销售员试用期自我评价
2014/09/15 职场文书
党员个人总结范文
2015/02/14 职场文书
酒店采购员岗位职责
2015/04/03 职场文书
公司的力量观后感
2015/06/05 职场文书
2016猴年开门红标语口号
2015/12/26 职场文书
Python编解码问题及文本文件处理方法详解
2021/06/20 Python
elasticSearch-api的具体操作步骤讲解
2021/06/28 Java/Android
JavaScript与JQuery框架基础入门教程
2021/07/15 Javascript
Java中Quartz高可用定时任务快速入门
2022/04/03 Java/Android