这里是文章模块栏目内容页
js 实现一个倒计时 代码和原理

你看到这篇文章时,倒计时应该已经结束了。

又到了金三银四季节,每年这个时候大家都在拼命刷题准备各大公司的招聘,这个时候我们需要对一些常见的面试题有所了解,比如今天要说的就是我在网上看到的,要你手写一个 js 倒计时效果,手写代码是什么感觉?速度 70 迈,心情真是嗨,本想好好秀一下的,谁知刚落笔就 ... ... 告辞!不过,多写代码确实可以保持手感,虽然刚开始会一直支支吾吾写不出,不过越写越顺手,越能发现自己的知识盲点,查漏补缺。

原理

既然是倒计时,肯定是要涉及到时间日期的操作了。js 里可以用 new Date() 来创建各种格式的时间日期。要能够倒计时,我们需要设置一个起始时间以及一个终止时间,计算出这两段时间的差,然后通过循环调用,每隔 1 秒刷新一次就实现了。假设我们以当前电脑的时间作为起始时间,然后定死一个终止时间,由于起始时间一直在递增,而终止时间不变,那么通过递归后就是一个倒计时了。整体思路不难理解,不过真正实现其代码来还是有诸多需要注意的。

实战

知道了大致实现思路后,你可以试着开始手写代码。我们定义一个函数,名为 countDown 。首先获取当前时间,现在是北京时间 2020年 10 月 16 日,16 时 57 分,倒计时 1 小时,那么终止时间是 2020年 10 月 16 日,17 时 57 分 。 

function countDown(){
  var nowtime = new Date();
  var endtime = new Date("2019/03/16,17:57:00");
  var lefttime = parseInt((endtime.getTime() - nowtime.getTime()) / 1000);}

lefttime 保存着两个时间的差值,getTime() 方法获取到时间戳,由于它是以 ms 为单位的,我们需要精确到秒就可以,所以除以 1000 就是以 s 为单位。
接着,我们可以将这个时间分别计算为 天,时,分,秒 了。代码如下

  var d = parseInt(lefttime / (24*60*60))
  var h = parseInt(lefttime / (60 * 60) % 24);
  var m = parseInt(lefttime / 60 % 60);
  var s = parseInt(lefttime % 60);

1 天 24 小时,1 小时 60 分钟,1 分钟 60 秒,稍微转换就能计算出上面几个变量的值。到了这里,有个小细节需要注意,如果是 10 以下的数我们要进行补零!。于是我们在写一个补零函数,名为 addZero .

function addZero(){
  return i < 10 ? "0" + i: i + "";}

好了,接下来对上面求得的 d,h,m,s 进行补零。

  d = addZero(d)
  h = addZero(h);
  m = addZero(m);
  s = addZero(s);

最后我们只需要利用 setTimeout 循环调用,每隔 1 s 刷新就可以了。

setTimeout(showtime, 1000);

OK! 一个倒计时函数大功告成。为了把它显示到浏览器页面上,我们需要在加点 HTML 代码:

html<p class="count"></p>

然后在 js 里加上:

 
document.querySelector(".count")[removed] = `活动倒计时  ${d}天 ${h} 时 ${m} 分 ${s} 秒`;if (lefttime <= 0) {
  document.querySelector(".count")[removed] = "活动已结束";
  return;}

这里的 if 判断当倒计时为 0 的时候,就显示 活动已结束 , 并且把函数 return 掉。

最终效果

由于上传 GIF 动图时出现了点小问题,你可以自己 run 下代码并到浏览器查看效果,这样记忆更深哦~

完整代码

<body>
  <p class="count"></p>
  <script>
      [removed] = function () {
          countDown();
          function addZero(i) {
              return i < 10 ? "0" + i: i + "";
          }
          function countDown() {
              var nowtime = new Date();
              var endtime = new Date("2019/03/16,17:57:00");
              var lefttime = parseInt((endtime.getTime() - nowtime.getTime()) / 1000);
              var d = parseInt(lefttime / (24*60*60))
              var h = parseInt(lefttime / (60 * 60) % 24);
              var m = parseInt(lefttime / 60 % 60);
              var s = parseInt(lefttime % 60);
              d = addZero(d)
              h = addZero(h);
              m = addZero(m);
              s = addZero(s);
              document.querySelector(".count")[removed] = `活动倒计时  ${d}天 ${h} 时 ${m} 分 ${s} 秒`;
              if (lefttime <= 0) {
                  document.querySelector(".count")[removed] = "活动已结束";
                  return;
              }
              setTimeout(countDown, 1000);
            }
        }    </script></body>


总结

知识需要通过实践来验证,先学好必备的基础知识,然后找些 demo 来练习巩固,在练习的过程中也许会发现自己以前忽视的一些小问题,也就起到了查漏补缺的作用。在 coding 中寻找快乐!