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脚本性能的优化方法
Feb 02 Javascript
jquery用data方法获取某个元素上的事件
Jun 23 Javascript
JQuery1.8 判断元素是否绑定事件的方法
Jul 10 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
Dec 24 Javascript
当jquery ajax遇上401请求的解决方法
May 19 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
Jul 04 Javascript
bootstrap使用validate实现简单校验功能
Dec 02 Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
Feb 19 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
微信小程序实现即时通信聊天功能的实例代码
Aug 17 Javascript
解决vux 中popup 组件Mask 遮罩在最上层的问题
Nov 03 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 Vue.js
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
ajax在joomla中的原生态应用代码
2012/07/19 PHP
Yii快速入门经典教程
2015/12/28 PHP
Extjs Gird 支持中文拼音排序实现代码
2013/04/15 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
2015/02/13 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
2015/03/24 Javascript
jQuery实现动画效果circle实例
2015/08/06 Javascript
跟我学习javascript的隐式强制转换
2015/11/16 Javascript
JS实现的倒计时效果实例(2则实例)
2015/12/23 Javascript
ES6教程之for循环和Map,Set用法分析
2017/04/10 Javascript
Vue解析带html标签的字符串为dom的实例
2019/11/13 Javascript
浅析Vue下的components模板使用及应用
2019/11/27 Javascript
JS寄快递地址智能解析的实现代码
2020/07/16 Javascript
python实现博客文章爬虫示例
2014/02/26 Python
python对配置文件.ini进行增删改查操作的方法示例
2017/07/28 Python
PyCharm在新窗口打开项目的方法
2019/01/17 Python
pytorch 预训练层的使用方法
2019/08/20 Python
Python中Unittest框架的具体使用
2019/08/27 Python
浅析matlab中imadjust函数
2020/02/27 Python
Python 实现网课实时监控自动签到、打卡功能
2020/03/12 Python
Django多数据库配置及逆向生成model教程
2020/03/28 Python
Python调用OpenCV实现图像平滑代码实例
2020/06/19 Python
Python tkinter界面实现历史天气查询的示例代码
2020/08/23 Python
可自定义箭头样式的CSS3气泡提示框
2016/03/16 HTML / CSS
NBA德国官方网上商店:NBA Store德国
2018/04/13 全球购物
美国隐形眼镜零售商:LensPure
2019/03/10 全球购物
澳洲本土太阳镜品牌:Quay Australia
2019/07/29 全球购物
伦敦香水公司:The London Perfume Company
2019/11/13 全球购物
圣彼得堡鲜花配送:Semicvetic
2020/09/15 全球购物
广州御银科技股份有限公司试卷(C++)
2016/11/04 面试题
大学在校生求职信范文
2013/11/21 职场文书
大学生创业计划书的范文
2014/01/07 职场文书
七年级政治教学反思
2014/02/03 职场文书
《满井游记》教学反思
2014/02/26 职场文书
《小鹰学飞》教学反思
2014/04/23 职场文书
化工操作工岗位职责
2014/04/29 职场文书
大学校园招聘会感想
2015/08/10 职场文书