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 相关文章推荐
input 高级限制级用法
Mar 26 Javascript
WEB高性能开发之疯狂的HTML压缩
Jun 19 Javascript
javascript 将共享属性迁移到原型中去的实现方法
Aug 31 Javascript
分分钟玩转Vue.js组件
Oct 25 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
Sep 20 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
Jan 25 Javascript
微信小程序代码上传、审核发布小程序
May 18 Javascript
js打开word文档预览操作示例【不是下载】
May 23 Javascript
JavaScript变量作用域及内存问题实例分析
Jun 10 Javascript
小程序采集录音并上传到后台
Nov 22 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
Apr 07 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 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
【COS正片】蕾姆睡衣cos,纯洁可爱被治愈了 cn名濑弥七
2020/03/02 日漫
动态新闻发布的实现及其技巧
2006/10/09 PHP
php 结果集的分页实现代码
2009/03/10 PHP
php通过修改header强制图片下载的方法
2015/03/24 PHP
PHP中ID设置自增后不连续的原因分析及解决办法
2016/08/21 PHP
javascript hashtable 修正版 下载
2010/12/30 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
2014/01/03 Javascript
js 采用delete实现继承示例代码
2014/05/20 Javascript
AngularJs IE Compatibility 兼容老版本IE
2016/09/01 Javascript
jQuery实现简单的tab标签页效果
2016/09/12 Javascript
canvas绘制万花筒效果(代码分享)
2017/01/20 Javascript
用原生JS实现简单的多选框功能
2017/06/12 Javascript
React Router v4 入坑指南(小结)
2018/04/08 Javascript
vue 实现根据data中的属性值来设置不同的样式
2020/08/04 Javascript
Python过滤函数filter()使用自定义函数过滤序列实例
2014/08/26 Python
python基础教程之常用运算符
2014/08/29 Python
Python中计算三角函数之cos()方法的使用简介
2015/05/15 Python
Python sys.argv用法实例
2015/05/28 Python
图文详解WinPE下安装Python
2016/05/17 Python
在cmd中运行.py文件: python的操作步骤
2018/05/12 Python
Django ModelForm操作及验证方式
2020/03/30 Python
python模拟斗地主发牌
2020/04/22 Python
Python实现打包成库供别的模块调用
2020/07/13 Python
美国领先的家庭健康检测试剂盒提供商:LetsGetChecked
2019/03/18 全球购物
GWT (Google Web Toolkit)有哪些主要的原件组成?
2015/06/08 面试题
土木工程毕业生自荐信
2013/09/21 职场文书
实习护理工作自我评价
2013/09/25 职场文书
高级人员简历的自我评价分享
2013/11/03 职场文书
学生安全教育材料
2014/02/14 职场文书
志愿者爱心公益活动策划方案
2014/09/15 职场文书
个性与发展自我评价
2015/03/06 职场文书
中学生国庆节演讲稿2015
2015/07/30 职场文书
热爱劳动主题班会
2015/08/14 职场文书
Python 解决空列表.append() 输出为None的问题
2021/05/23 Python
Python max函数中key的用法及原理解析
2021/06/26 Python
详细聊聊MySQL中慢SQL优化的方向
2021/08/30 MySQL