MENU

HTML列表倒计时

2021 年 04 月 15 日 • 阅读: 65 • 技巧杂烩

前言

收到好友的求助:
截图

于是乐于助人的我就准备写个实列了。

实现

经询问html是后端直接生成的,那我直接用<ul>写个简单的列表结构

<ul>
  <li>内容1</li>
  <li>内容2</li>
  <li>内容3</li>
</ul>

一开始想到用onload来执行js函数实现单个倒计时

<ul>
  <li onload="timeDown(this, '2021/04/15 06:00:00');">倒计时1</li>
  <li onload="timeDown(this, '2021/04/15 06:20:03');">倒计时2</li>
  <li onload="timeDown(this, '2021/04/15 06:30:02');">倒计时3</li>
</ul>

onload只能用于<body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>标签上。

于是就想到了在标签内添加属性的方式

<ul>
  <li timeDown="2021/04/15 06:10:03">倒计时1</li>
  <li timeDown="2021/04/15 06:20:02">倒计时2</li>
  <li timeDown="2021/04/15 06:30:01">倒计时3</li>
</ul>

<ul>标签下面加个<script>标签,这放在<ul>标签下的原因是为了避免获取不到<ul>元素

<ul>
  …
</ul>
<script>
  …
</script>

具体过程

  • 新建一个js函数,让它自动执行
  • 获取所有需要倒计时的元素
  • 使用for遍历执行倒计时函数

代码实现

(()=>{
  var d = document.querySelectorAll("*[timeDown]");
  for(var i=0; i<d.length; i++){
    timeDown(d[i],d[i].getAttribute("timeDown"));
  }
  function timeDown(e, r){
    setInterval(()=>{
      var s={};
      s.r = new Date(r).getTime() - new Date().getTime();
      if(s.r > 0){
        s.d = Math.floor(s.r/1000/60/60/24);
        s.h = Math.floor(s.r/1000/60/60%24);
        s.m = Math.floor(s.r/1000/60%60);
        s.s = Math.floor(s.r/1000%60);
        e.innerHTML = "还剩"+s.d+"天"+s.h+"小时"+s.m+"分钟"+s.s+"秒";
      }else{
        e.innerHTML = "已过时";
      }
    },200);
  }
})();

实列代码

<ul>
  <li timeDown="2021/04/14 06:10:03">倒计时1</li>
  <li timeDown="2021/04/15 06:20:02">倒计时2</li>
  <li timeDown="2021/04/16 06:30:01">倒计时3</li>
</ul>
<script>
(()=>{
  var d = document.querySelectorAll("*[timeDown]");
  for(var i=0; i<d.length; i++){
    timeDown(d[i],d[i].getAttribute("timeDown"));
  }
  function timeDown(e, r){
    setInterval(()=>{
      var s={};
      s.r = new Date(r).getTime() - new Date().getTime();
      if(s.r > 0){
        s.d = Math.floor(s.r/1000/60/60/24);
        s.h = Math.floor(s.r/1000/60/60%24);
        s.m = Math.floor(s.r/1000/60%60);
        s.s = Math.floor(s.r/1000%60);
        e.innerHTML = "还剩"+s.d+"天"+s.h+"小时"+s.m+"分钟"+s.s+"秒";
      }else{
        e.innerHTML = "已过时";
      }
    },200);
  }
})();
</script>

食用方法

复制上面实列代码的<script>标签全部内容到你需要的页面,在需要展示倒计时的标签元素里添加上timeDown="{倒计时结束时间}"即可实现倒计时

注意:

  • {倒计时结束时间}的格式是:Y-m-d H:i:s
  • js代码要放在含有timeDown的标签元素的下面

|十年之约

本网站由提供CDN加速/云储存服务