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 相关文章推荐
JQuery触发事件例如click
Sep 11 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
Jan 13 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
Jan 29 Javascript
jQuery实现删除li节点的方法
Dec 06 Javascript
数组Array的一些方法(总结)
Feb 17 Javascript
Vue2递归组件实现树形菜单
Apr 10 Javascript
微信小程序tabBar用法实例详解
Dec 04 Javascript
vue中的自定义分页插件组件的示例
Aug 18 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
Apr 18 Javascript
详解vue的数据劫持以及操作数组的坑
Apr 18 Javascript
JS数组Reduce方法功能与用法实例详解
Apr 29 Javascript
vue过滤器实现日期格式化的案例分析
Jul 02 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
php短域名转换为实际域名函数
2011/01/17 PHP
分享一个Laravel好用的Cache宏
2015/03/02 PHP
PHP完全二叉树定义与实现方法示例
2017/10/09 PHP
phpstudy的php版本自由修改的方法
2017/10/18 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
2010/07/26 Javascript
加载 Javascript 最佳实践
2011/10/30 Javascript
javaScript arguments 对象使用介绍
2013/10/18 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
2014/02/19 Javascript
js实现进度条的方法
2015/02/13 Javascript
JavaScript中Cookies的相关使用教程
2015/06/04 Javascript
javascript事件绑定学习要点
2016/03/09 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
2016/05/17 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
2017/01/04 Javascript
浅谈vue-lazyload实现的详细过程
2017/08/22 Javascript
详解layui中的树形关于取值传值问题
2018/01/16 Javascript
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
Node.js实现批量下载图片简单操作示例
2020/01/18 Javascript
如何在JavaScript中创建具有多个空格的字符串?
2020/02/23 Javascript
Python-基础-入门 简介
2014/08/09 Python
python实现获取序列中最小的几个元素
2014/09/25 Python
浅谈Python中的私有变量
2018/02/28 Python
selenium跳过webdriver检测并模拟登录淘宝
2019/06/12 Python
Python的控制结构之For、While、If循环问题
2020/06/30 Python
Django中Q查询及Q()对象 F查询及F()对象用法
2020/07/09 Python
Square Off美国/加拿大:世界上最聪明的国际象棋棋盘
2018/12/06 全球购物
The North Face意大利官网:服装、背包和鞋子
2020/06/17 全球购物
注塑工厂厂长岗位职责
2013/12/02 职场文书
培训楼经理岗位责任制
2014/02/10 职场文书
学校做一个有道德的人活动方案
2014/08/23 职场文书
推普周国旗下讲话稿
2014/09/21 职场文书
城管年度个人总结
2015/02/28 职场文书
2016道德模范先进事迹材料
2016/02/26 职场文书
MongoDB安装使用并实现Python操作数据库
2021/06/28 MongoDB
SQL Server作业失败:无法确定所有者是否有服务器访问权限的解决方法
2021/06/30 SQL Server
MySQL中dd::columns表结构转table过程及应用详解
2022/09/23 MySQL