×
400 028 6601

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

js如何实现一个页面多个倒计时的3种方法-创新互联

这篇文章将为大家详细讲解有关js如何实现一个页面多个倒计时的3种方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

成都创新互联公司专注于伊通企业网站建设,响应式网站设计,购物商城网站建设。伊通网站建设公司,为伊通等地区提供建站服务。全流程按需制作网站，专业设计，全程项目跟踪，成都创新互联公司专业和态度为您提供的服务js有什么特点

1、js属于一种解释性脚本语言；2、在绝大多数浏览器的支持下，js可以在多种平台下运行，拥有着跨平台特性；3、js属于一种弱类型脚本语言，对使用的数据类型未做出严格的要求，能够进行类型转换，简单又容易上手；4、js语言安全性高，只能通过浏览器实现信息浏览或动态交互，从而有效地防止数据的丢失；5、基于对象的脚本语言，js不仅可以创建对象，也能使用现有的对象。

具体内容如下

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

方法一：




 
 倒计时

 
 
 
   
     

方法二：




 
 倒计时

 
  
  
  
 
 
 
 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); 
 

方法三：




 
 倒计时

 
 
  
  
 
 
 

关于“js如何实现一个页面多个倒计时的3种方法”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。


新闻名称：js如何实现一个页面多个倒计时的3种方法-创新互联
文章路径：http://mzwzsj.com/article/jioei.html

其他资讯

让你的专属顾问为你服务