JS倒计时

逑景铄
2023-12-01
JS倒计时
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ul class="time-list">
    
  </ul>

  <script>
    const target = document.querySelector('.time-list');
    const arr = [{ // 未开始
        serverTime: '2020-06-10 21:59:55',
        acStartTime: '2020-06-10 22:00',
        acEndTime: '2020-06-10 23:59'
      },
      { // 进行中
        acStartTime: '2020-06-10 22:00',
        serverTime: '2020-06-10 23:58:50',
        acEndTime: '2020-06-10 23:59'
      },
      { // 已结束
        acStartTime: '2020-06-10 22:00',
        acEndTime: '2020-06-10 23:59',
        serverTime: '2020-06-11 01:00'
      },
      { // 活动起始结束时间都异常：也会当做已结束
        acStartTime: '',
        acEndTime: '',
        serverTime: '2020-06-10 01:00'
      },
    ];

    // 测试渲染结果
    const render = (list = []) => {
      const ret = [];
      list.forEach(v => ret.push('<li>'+v.difftime+'</li>'));
      target.innerHTML = ret.join('');
    };
    // 极简版：利用 reduce 循环直接返回结果
    // const render = (list = []) => target.innerHTML = list.reduce((str,item) => str +='<li>'+item.difftime+'</li>', '');

    const formatTime = (secs = 0) => {
      let str = "";

      if (secs*1 > 0) { //转换时间
        let hour = Math.floor(secs / 3600);
        let minute = Math.floor(secs / 60 % 60);
        let second = Math.floor(secs % 60);
        
        if (hour < 10) hour = `0${hour}`;
        if (minute < 10) minute = `0${minute}`;
        if (second < 10) second = `0${second}`;


        // 或者利用‘字符串’padStart补全0
        // let hour = Math.floor(secs / 3600).toString();
        // let minute = Math.floor(secs / 60 % 60).toString();
        // let second = Math.floor(secs % 60).toString();

        // hour = hour.padStart(2,0)
        // minute = minute.padStart(2,0)
        // second = second.padStart(2,0)

        str = `${hour}:${minute}:${second}`
      }

      return str;
    };

    const delayTime = (dates = []) => {
      let timer;

      const nowTime = () => { //时间函数
        if(dates.every(d => d.dat <= 0)) clearInterval(timer);

        dates.map(item => {
          item.dat = Math.max(0,item.dat - 1);
          item.difftime = formatTime(item.dat) || "00:00:00";
          return item;
        });

        console.log(JSON.stringify(dates));
        render(dates);
      };
      
      nowTime();
      timer = setInterval(nowTime, 1000);
    };

    const statusMap = { 0: '未开始', 1: '进行中', 2: '已结束' };

    const dates = [];
    if (arr.length) {
      arr.map((val, key) => {
        const start = val.acStartTime;
        const end = val.acEndTime;
        const server = val.serverTime;
        const stime = start ? parseInt(new Date(start).getTime() / 1000) : '';
        const etime = end ? parseInt(new Date(end).getTime() / 1000) : '';
        const sertime = server ? parseInt(new Date(server).getTime() / 1000) : '';

        // 优化下可以只有一个 status 标志位判断
        // val.timePlay = val.startTimePlay = false;

        if (sertime >= stime) {
          if (sertime < etime) { //已开始 - 未结束
            val.status = 1;
            val.remainingTime = etime - sertime
            // val.startTimePlay = false;
            // val.timePlay = true;
          } else { // 已结束 or 异常数据
            val.status = 2;
            val.remainingTime = null;
            // val.startTimePlay= false;
            // val.timePlay = false;
          }
        } else { //未开始
          val.status = 0;
          val.remainingTime = stime - sertime;
          // val.startTimePlay = true;
          // val.timePlay = false;
        }

        console.log(val.status + '---' + statusMap[val.status]);

        val.remainingTime && dates.push({ dat: val.remainingTime });

        return val;
      });

      console.log(arr);
      console.log("活动剩余时间：", dates);

      delayTime(dates)
    }
  </script>
</body>
</html>
JS倒计时

相关阅读

相关文章

相关问答

相关文档
