面试必问--js实现多个日期同时倒计时

最新推荐文章于 2020-12-13 13:41:19 发布

真是敞亮

最新推荐文章于 2020-12-13 13:41:19 发布

阅读量139

点赞数

分类专栏： JS 文章标签：面试 javascript

本文链接：https://blog.csdn.net/weixin_45743297/article/details/104215738

版权

JS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

HR
我和面试官的对话

疫情严重,语音面试. 上图是阿风和面试官的对话.

废话不多说,上代码. 大家一起看看我的答案.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .mytime{ line-height: 40px; width: 300px; margin: 0 auto;}
</style>
</head>
<body>
  

<div class="mytime jsTime" data-time="2020-03-01 16:58:00">时间1</div>
<div class="mytime jsTime" data-time="2020-03-04 18:00:02">时间2</div>
<div class="mytime jsTime" data-time="2020-03-05 19:01:31">时间3</div>
<div class="mytime jsTime" data-time="2020-03-06 05:05:15">时间4</div>
<div class="mytime jsTime" data-time="2020-03-07 09:01:43">时间5</div>

</body>
<!-- 方法1 -->
<script>
  const countdown = {
      domList : document.querySelectorAll('.jsTime'),
      formatNumber(n){
          // return n.toString().padStart(2, '0');  // 用padStart方法要注意兼容问题
          n = n.toString();
          return n[1] ? n : '0' + n;
      },
      setTime(dom){
          //获取设置的时间 如：2019-3-28 14:00:00  ios系统得加正则.replace(/\-/g, '/');
          const leftTime = new Date(dom.getAttribute('data-time').replace(/\-/g, '/')) - new Date();
          if (leftTime >= 0) {
              const d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
              const h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
              const m = Math.floor(leftTime / 1000 / 60 % 60);
              const s = Math.floor(leftTime / 1000 % 60);
              dom.innerHTML = `剩余${ d > 0 ? d + '天' : '' }${ [h, m, s].map(this.formatNumber).join(':') }`;
          } else {
              clearInterval(dom.$timer);
              dom.innerHTML = '订单已过期';
          }
      },
      start(){
          this.domList.forEach((dom) => {
              this.setTime(dom);
              dom.$timer = setInterval(() => {
                  this.setTime(dom);
              }, 1e3);
          });
      },
  };
  countdown.start();
</script>


</html>

喜欢的小姐姐,直接复制粘贴拿走吧 i~ o(￣▽￣)ブ

不知道阿风能不能拿下这个HR呢?

希望疫情早日得到控制, 社会秩序早日恢复正常.

真是敞亮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
面试必问--js实现多个日期同时倒计时

HR疫情严重,语音面试. 上图是阿风和面试官的对话.废话不多说,上代码. 大家一起看看我的答案.<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ini...
复制链接

扫一扫