拿来即用的网页倒计时组件

矫情吗；* 2023-06-29 07:28 15阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>倒计时组件by TCF_JingFeng</title>
    </head>
    
    <style>
        .listtime {
            width: 800px;
            padding: 100px 0 0 0;
            font-family: fontb;
            margin: 0 auto;
            display: block;
        }
    
        .listtime li {
            width: 50px;
            float: left;
            font-size: 38px;
            color: #494eff;
            line-height: 40px;
            text-align: center;
            margin-right: 6px;
            list-style: none;
        }
    
        .listtime li.day {
            margin-right: 6px;
        }
    
        .listtime li.hour {
            margin-right: -1px;
        }
    
        .listtime li.minute {
            margin-right: 1px;
        }
    </style>
    <body>
    <ul class="listtime">
        
        
        
        
        <li class="day">日</li>
        <li>:</li>
        <li class="hour">时</li>
        <li>:</li>
        <li class="minute">分</li>
        <li>:</li>
        <li>秒</li>
    </ul>
    <ul class="listtime">
        
        
        
        
        <li id="day" class="day"></li>
        <li>:</li>
        <li id="hour" class="hour"></li>
        <li>:</li>
        <li id="minute" class="minute"></li>
        <li>:</li>
        <li id="second"></li>
    </ul>
    <script>
      var fnTimeCountDown = function (d, o) {
        return new Promise((resolve, reject) => {
          var f = {
            zero: function (n) {
              var n = parseInt(n, 10);
              if (n > 0) {
                if (n <= 9) {
                  n = "0" + n;
                }
                return String(n);
              } else {
                return "00";
              }
            },
            dv: function () {
              d = d || Date.UTC(2050, 0, 1, 0, 0, 0); //如果未定义时间，则设定倒计时日期是2050年1月1日0时
              var future = new Date(d), now = new Date();
              //现在将来秒差值
              var dur = Math.round((future.getTime() - now.getTime()) / 1000) + future.getTimezoneOffset() * 60, pms = {
                sec: "00",
                mini: "00",
                hour: "00",
                day: "00",
           /*     month: "00",
                year: "00"*/
              };
              if (dur > 0) {
                pms.sec =  Math.floor((dur)) > 0 ? f.zero(Math.floor(dur % 60)) : "00";
                pms.mini = Math.floor((dur / 60)) > 0 ? f.zero(Math.floor((dur / 60)) % 60) : "00";
                pms.hour = Math.floor((dur / 3600)) > 0 ? f.zero(Math.floor((dur / 3600)) % 24) : "00";
                pms.day = Math.floor((dur / 86400)) > 0 ? f.zero(Math.floor((dur / 86400))) : "00";
    /*            //月份，以实际平均每月秒数计算
                pms.month = Math.floor((dur / 2629744)) > 0 ? f.zero(Math.floor((dur / 2629744)) % 12) : "00";
                //年份，按按回归年365天5时48分46秒算
                pms.year = Math.floor((dur / 31556926)) > 0 ? Math.floor((dur / 31556926)) : "00";*/
    
              }
    
              if (pms.day == "00" && pms.hour == "00" && pms.mini == "00" && pms.sec == "00") {
                resolve("结束了")
              }
    
              return pms;
            },
            ui: function () {
              if (o.sec) {
                o.sec.innerHTML = f.dv().sec;
              }
              if (o.mini) {
                o.mini.innerHTML = f.dv().mini;
              }
              if (o.hour) {
                o.hour.innerHTML = f.dv().hour;
              }
              if (o.day) {
                o.day.innerHTML = f.dv().day;
              }
    /*          if (o.month) {
                o.month.innerHTML = f.dv().month;
              }
              if (o.year) {
                o.year.innerHTML = f.dv().year;
              }*/
              setTimeout(f.ui, 1000);
            }
          };
          f.ui();
        })
      };
    </script>
    
    <script>
      //	倒计时
      var djs = {
        $: function (id) {
          return document.getElementById(id);
        },
        futureDate: Date.UTC(2022, 0, 0, 0, 0, 0),//年，月0 ~ 11，日1 ~ 31，时 0 ~ 23，分0 ~ 59，秒0 ~ 59，毫秒0 ~ 999
        obj: function () {
          return {
            sec: djs.$("second"),
            mini: djs.$("minute"),
            hour: djs.$("hour"),
            day: djs.$("day"),
       /*     month: djs.$("month"),
            year: djs.$("year")*/
          }
        }
      };
      fnTimeCountDown(djs.futureDate, djs.obj()).then((data) => {
        console.log(data);
    
        //结束回调函数
      });
    </script>
    </body>
    </html>