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

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jQuery.parseJSON()函数详解

    jQuery.parseJSON()函数用于将格式完好的JSON字符串转为与之对应的JavaScript对象. 所谓"格式完好",就是要求指定的字符串必须符合严格的JSON格式,例如:属性名称必须加双引号.字符串值也必须用双引号. 如果传入一个格式不"完好"的JSON字符串将抛出一个JS异常,例如:以下字符串均符合JSON格式,但它们不是格式完好的JSON字符串(因此会抛出异常): // 以下均是字符串值,省略了两侧的引号,以便于展现内容 {id: 1} // id

  • 基于node.js实现爬虫的讲解

    1. cheerio 与 request request:模拟客户端行为,对页面进行请求 cheerio:对服务器端返回的页面进行解析: var cheerio = require('cheerio'); var request = require('request'); var startUrl = 'http://www.baidu.com' request(startUrl, function(err, response) { if (err) { console.log(err); }

  • Vue动态组件与异步组件实例详解

    Vue动态组件与异步组件实例详解

    本文实例讲述了Vue动态组件与异步组件.分享给大家供大家参考,具体如下: 1 在动态组件上使用 keep-alive 我们之前曾经在一个多标签的界面中使用 is 特性来切换不同的组件: <component v-bind:is="currentTabComponent"></component> 当在这些组件之间切换的时候,你有时会想保持这些组件的状态,以避免反复重渲染导致的性能问题.例如我们来展开说一说这个多标签界面: 你会注意到,如果你选择了一篇文章,切换到

  • js获取form表单中name属性的值

    在项目中因为动态表单无法确定标签name属性的值,因此需要即时获取以便进行存储.前端代码如下: <div class="control-group"> <label class="control-label">土拨鼠常挖坑</label> <form:input path="formAttribute1" class="input-xlarge" value=""

  • 使用nginx同域名下部署多个vue项目并使用反向代理的方法

    效果 目前有 2 个项目(project1, project2),还有一个 nginx 自带的 index.html,我添加了对应的链接代码(稍后粘贴出来),为了统一管理子项目的路由. 我期望实现下面的效果(假设 ip: localhost,port: 8080): http://localhost:8080/ 进入最外层的 index.html http://localhost:8080/project1 进入项目一 http://localhost:8080/project2 进入项目二 废

  • JS判断两个数组或对象是否相同的方法示例

    本文实例讲述了JS判断两个数组或对象是否相同的方法.分享给大家供大家参考,具体如下: JS 判断两个数组是否相同 要判断2个数组是否相同,首先要把数组进行排序,然后转换成字符串进行比较. JSON.stringify([1,2,3].sort()) === JSON.stringify([3,2,1].sort()); //true 或者 [1,2,3].sort().toString() === [3,2,1].sort().toString(); //true 经验证,上述方法对复杂数组结构

  • Vue.js实现开发购物车功能的方法详解

    Vue.js实现开发购物车功能的方法详解

    本文实例讲述了Vue.js实现开发购物车功能的方法.分享给大家供大家参考,具体如下: 购物车一般包含商品名称.单价.数量等信息,数量可以任意新增或减少,商品项也可删除,还可以支持全选或多选: 我们把这个小项目分为三个文件: index.html (页面) index.js (Vue 脚本) style.css (样式) 1 index.js 首先在 js 中初始化 Vue 实例,整体模板如下: var app = new Vue({ el: '#app', data: { ... }, moun

  • VUE引入第三方js包及调用方法讲解

    VUE引入第三方js包及调用方法 1.首先是第三方js包存放的位置 一定要放在 static 目录下否则引用不到 2.网上查找到的引用第三方包的四种方式 实测部分第三方js包没法使用,较稳定的方式是在 index.html 中引入js包 <script src="static/xxxxx.js"></script> 3.mounted 是初始化加载的方法 可以理解为jquery 中的页面加载完的初始化方法 如果第三方包有初始化需要调用的一些函数等 需要写在mou

  • Python常用的json标准库

    当请求 headers 中,添加一个name为 Accept,值为 application/json 的 header(也即"我"(浏览器)接收的是 json 格式的数据),这样,向服务器请求返回的未必一定是 HTML 页面,也可能是 JSON 文档. 1. 数据交换格式 -- JSON(JavaScript Object Notation) http 1.1 规范 请求一个特殊编码的过程在 http1.1 规范中称为内容协商(content negotiation) JSON 特点

  • vue组件之间通信方式实例总结【8种方式】

    本文实例总结了vue组件之间通信方式.分享给大家供大家参考,具体如下: 对于vue来说,组件之间的消息传递是非常重要的,下面是我对组件之间消息传递的各种方式的总结,总共有8种方式. 1. props和$emit 父组件向子组件传递数据是通过prop传递的,子组件传递数据给父组件是通过$emit触发事件来做到的. Vue.component('child',{ data(){ return { mymessage:this.message } }, template:` <div> <in

随机推荐