jQuery实现倒计时效果

最新推荐文章于 2024-09-14 15:41:17 发布

岁月如歌_

最新推荐文章于 2024-09-14 15:41:17 发布

阅读量1.5k

点赞数 1

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/namechenfl/article/details/129234860

版权

该代码段定义了一个jQuery扩展函数countDown，用于创建倒计时效果。函数接受结束时间和显示类型作为参数，计算剩余的天数、小时、分钟和秒数，并实时更新到页面元素中。默认显示天数，但可选择不显示。示例中设置的倒计时至2023年3月26日18点00分00秒。

摘要由CSDN通过智能技术生成

 <script type="text/javascript">
    /*
    @用途：jQuery实现倒计时效果$(".time").countDown({time: "2015/12/1 10:00:00",type:0})
    @参数：time: 结束时间,type:显示方式（0显示天数，1不显示天数）
    */
    $.fn.countDown = function (opt) {
      var opt = $.extend(
        {
          time: null,
          type: 0,
        },
        opt
      );

      var edtime = new Date(opt.time).getTime(), //月份是实际月份-1
        edsecond = (edtime - new Date().getTime()) / 1000;

      var eday = $(this).find(".day"),
        ehour = $(this).find(".hour"),
        eminute = $(this).find(".minute"),
        esecond = $(this).find(".second");

      var timer = setInterval(function () {
        if (edsecond > 1) {
          let Html = "";
          edsecond -= 1;
          var day = Math.floor(edsecond / 3600 / 24),
            hour = Math.floor((edsecond / 3600) % 24),
            minute = Math.floor((edsecond / 60) % 60),
            second = Math.floor(edsecond % 60);
          if (opt.type === 1) {
            hour = day * 24 + hour;
          }
          Html = `${opt.type === 0 ? day + "天" : ""}${
            hour < 10 ? "0" + hour : hour
          }小时 ${minute < 10 ? "0" + minute : minute}分 ${
            second < 10 ? "0" + second : second
          }秒`;
          $("#time").html(Html);
        } else {
          clearInterval(timer);
        }
      }, 1000);
    };
    $(function () {
      $(".time").countDown({
        time: "2023/3/26 18:00:00",
        type: 0, // 0显示天 1不显示天
      });
    });
  </script>