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

最新推荐文章于 2022-02-15 09:40:00 发布

劲枫

最新推荐文章于 2022-02-15 09:40:00 发布

阅读量429

点赞数

分类专栏：前端文章标签： web倒计时组件

本文链接：https://blog.csdn.net/TCF_JingFeng/article/details/103936267

版权

前端专栏收录该内容

60 篇文章 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="year">年</li>-->
    <!--<li>:</li>-->
    <!--<li class="month">月</li>-->
    <!--<li>:</li>-->
    <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="year" class="year"></li>-->
    <!--<li>:</li>-->
    <!--<li id="month" class="month"></li>-->
    <!--<li>:</li>-->
    <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>

劲枫

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
拿来即用的网页倒计时组件

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>倒计时组件by TCF_JingFeng</title></head><style> .listtime { wid...
复制链接

扫一扫