纯js实现倒计时功能

2024-10-05 17:45:48

通过js实现页面的倒计时功能。

思路：传入一个秒数c，c/60可以得到分钟m, c%60可以得到显示的秒数s，同理，再将m/60可是得到小时数, m/%可以得到分钟数。通过setInterval每次将总秒数-1，并将计算所得时间显示到页面上。

第一版的肮脏代码如下，可以作为反面教材思考一下

<html>
  <head>
    <title>Tomato</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript">
      var vTimeLength = 5;
      var vHour;
      var vMinutes;
      var vSeconds;
      var vRemainingTime;
      function countDown(){
        vTimeLength = vTimeLength - 1;
        vMinutes = Math.floor(vTimeLength/60);
        vSeconds = Math.floor(vTimeLength%60);
        if (vMinutes >= 60){
          vHour = Math.floor(vMinutes/60);
          var vMinutesNew = Math.floor(vMinutes%60);
          vRemainingTime = vHour + ":" + vMinutesNew + ":" + vSeconds;
        } else {
          vRemainingTime = vMinutes + ":" + vSeconds;
        }
        document.getElementById("div_countDown").innerHTML = vRemainingTime;
        if (vTimeLength < 1) {
          alert('do sth');
        }
      }
    </script>
  </head>
  <body>
    <div id="div_countDown"></div>
    <script type="text/javascript">
      setInterval("countDown()", 1000);
    </script>
  </body>
</html>

缺陷：

1、定义了众多的全局变量，

2、没有复用性，

3、setInterval容易导致队列过多，结束事件如果是非阻塞事件，倒计时会继续执行出现负数，

4、不符合面向对象思想。。。

针对缺陷1的解决方案是，定义一个函数，将相关全局变量放到函数内部，使之成为局部变量

针对缺陷2：为函数指定参数，提高复用性。这里定义了3个参数vTimeLength为倒计时总秒数，showTagId为显示到页面元素的id， callback为倒计时结束后的回掉方法

针对缺陷3：用setTimeout替代setInterval

优化后的代码如下：

<html>
  <head>
    <title>countdown</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript">
      function countDown(vTimeLength, showTagId, callback) {
        var vHour;
        var vMinutes;
        var vMinutesNew
        var vSeconds;
        var vRemainingTime;
        function countDownInner(vTimeLength){
          vMinutes = Math.floor(vTimeLength/60);
          vSeconds = Math.floor(vTimeLength%60);
          if (vMinutes >= 60){
            vHour = Math.floor(vMinutes/60);
            vMinutesNew = Math.floor(vMinutes%60);
            vRemainingTime = vHour + ":" + vMinutesNew + ":" + vSeconds;
          } else {
            vRemainingTime = vMinutes + ":" + vSeconds;
          }
          document.getElementById(showTagId).innerHTML = vRemainingTime;
          vTimeLength = vTimeLength - 1;
          if (vTimeLength > 0) {
            setTimeout(function(){countDownInner(vTimeLength);}, 1000);
          } else {
            callback();
          }
        }
        countDownInner(vTimeLength);
      }
    </script>
  </head>
  <body>
    <div id="div_countDown"></div>
    <script type="text/javascript">
      countDown(5, "div_countDown", function(){alert('do sth');});
    </script>
  </body>
</html>

这里有一点需要注意

setTimeout(function(){countDownInner(vTimeLength);}, 1000);

第一次我将此句写成了

setTimeout(countDownInner(vTimeLength), 1000);

结果函数直接执行了，没有等待1秒的时间。如果没有入参，即setTimeout("countDownInner()", 1000); 则可正常执行。

至于前面提到的不够面向对象的缺陷，也是刚刚接触，这里贴出代码，希望能够互相交流

<html>
  <head>
    <title>count_down</title>
    <script type="text/javascript">
    var countDown = {
      flag: true,
      hour: 0,
      minutes: 0,
      minutesNew: 0,
      seconds: 0,
      show: 0,
      current: 0,
      length: 0,
      showTagId: null,
      // callback: null,
      countDownInner: function(vTimeLength){
        if (!this.flag) {
          return;
        }
        var that=this;
        this.current = vTimeLength;
        minutes = Math.floor(vTimeLength/60);
        seconds = Math.floor(vTimeLength%60);
        if (minutes >= 60){
          hour = Math.floor(minutes/60);
          minutesNew = Math.floor(minutes%60);
          show = hour + ":" + minutesNew + ":" + seconds;
        } else {
          show = minutes + ":" + seconds;
        }
        document.getElementById(this.showTagId).innerHTML = show;
        vTimeLength = vTimeLength - 1;
        if (vTimeLength > 0) {
          setTimeout(function(){that.countDownInner(vTimeLength);}, 1000);
        } else {
          setTimeout(function(){that.callback();}, 1000);
        }
      },
      run: function(vTimeLength, showTagId, callback) {
        if (!this.flag) {
          this.flag = true;
          this.countDownInner(this.current);
        } else if (showTagId) {
          this.length = vTimeLength;
          this.showTagId = showTagId;
          this.callback = callback;
          this.countDownInner(vTimeLength);
        }
      },
      stop: function(){
        this.flag = false;
      },
      restart: function(){
        this.flag = true;
        this.countDownInner(this.length);
      }
    };
    function countDownStart() {
      countDown.run();
    }
    function countDownStop() {
      countDown.stop();
    }
    </script>
  </head>
  <body>
    <div id="div_countDown"></div>
    <script type="text/javascript">
      countDown.run(5, 'div_countDown',function(){alert('12')});
    </script>
    <span>
      <button onclick="countDownStart();">start</button>
      <button onclick="countDownStop();">stop</button>
    </span>
  </body>
</html>

一个难点是this的使用，在函数内部， this是调用当前函数范围，所以setTimeout(function(){this.countDownInner(vTimeLength);}, 1000);会出现undefined。

解决方案是定义一个that变量接收外部函数的this指针，然后通过that即可调用外部域。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

javascript特效实现——当前时间和倒计时效果的简单实例

这个效果的实现关键是对Date对象和setTimeout的使用. 一共有三个例子,HTML结构如下,就不添加CSS样式了. <body> 当前时间:<p id="p1"></p> 高考倒计时:<p id="p2"></p> 限时抢购:<p id="p3"></p> </body> 主要体会javascript的实现 window.onload=func
js代码实现点击按钮出现60秒倒计时

比如,一些网站上的手机短信认证的功能,有类似实现点击按钮后,倒计时60秒才能再次点击发送的效果. 此例子用Javascript实现点击按钮后,倒计时60秒才能再次点击发送验证码的功能. 例子1:Javascript 实现点击按钮倒计时60秒方可再次点击发送的效果 <input type="button" id="btn" value="免费获取验证码" /> <script type="text/javascrip
js实现精确到毫秒的倒计时效果

本文实例为大家分享了精确到毫秒的倒计时效果,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
纯jsp实现的倒计时动态显示效果完整代码

本文实例讲述了纯jsp实现的倒计时动态显示效果代码.分享给大家供大家参考,具体如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <div id="showTimes"></div> <% long current_time=System.currentTimeMillis(); long e
点击按钮出现60秒倒计时的简单js代码(推荐)

点击按钮出现60秒倒计时的简单js代码(推荐) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta h
PHP+JS实现的商品秒杀倒计时用法示例

本文实例讲述了PHP+JS实现的商品秒杀倒计时用法.分享给大家供大家参考,具体如下: <?php //php的时间是以秒算.js的时间以毫秒算 date_default_timezone_set('PRC'); //date_default_timezone_set("Asia/Hong_Kong");//地区 //配置每天的活动时间段 $starttimestr = "2016-3-29 8:10:00"; $endtimestr = "2016-
js制作支付倒计时页面

本文实例为大家分享了js支付倒计时页面制作代码,供大家参考,具体内容如下 (图一) (图二) (图三) (图四) 实现目标一.页面在图一时开始进行倒计时(可以点击取消订单按钮,支付页面消失). 二.倒计时完毕,出现删除订单. 三.单击删除订单,弹出弹框,询问是否要真正删除订单. 四.单击确定,即可删除订单. 如上图所示效果展示,这里给出所有的源代码(如需运行,只需要修改EJS文件中引入的CSS路径和JS路径即可). 这个页面其实是自己业余时间,写的东西. 但是里面涉及到,倒计时,弹框,以及字体
JS/jQ实现免费获取手机验证码倒计时效果

最近做了一个项目,其中有项目需求涉及到手机号验证码,就是当用户点击获取验证码之后我们会发送一条信息到用户手机,然后就会出现一个倒计时按钮,很像支付宝手机付款效果了,下面我给大家分享两个实现代码. 如何获取手机验证码? 小月不知道大家是利用什么平台去获取验证码的,但是告诉大家我是在哪个平台获取的. LeanCloud :https://leancloud.cn/ 文档:https://leancloud.cn/docs/sms_guide-js.html 在这个平台首先去要注册一个账号,在设置里面
JS实现倒计时(天数、时、分、秒)

本文实例为大家解析了JS实现倒计时的详细过程,供大家参考,具体内容如下注释: parseInt() 函数可解析一个字符串,并返回一个整数. 语法: parseInt(string, radix) 例: parseInt("10"); //返回 10 parseInt("19",10); //返回 19 (10+9) parseInt("11",2); //返回 3 (2+1) parseInt("17",8); //返回 1
JavaScript实现刷新不重记的倒计时

前言 JavaScript倒计时,实现起来不难,但是一刷新往往就重新计算了,如果要实现刷新不重计该如何做呢? 有这么几种思路, 1:cookie 2:本地缓存 3:window.name -- 前两种比较容易理解,今天我来为大家实现使用window.name实现刷新不重计,代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DT

纯js实现倒计时功能

相关推荐

随机推荐