首页 前端知识 jQuery实现倒计时效果

jQuery实现倒计时效果

2024-02-27 11:02:08 前端知识 前端哥 864 472 我要收藏
 <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>
<span id="time"></span>

效果

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2835.html
标签
评论
发布的文章

前端大屏适配几种方案

2024-01-29 13:01:44

JQ效果—展开和收起

2024-03-13 00:03:45

JQuery事件的基本使用

2024-03-13 00:03:39

「jQuery系列」jQuery 事件

2024-03-13 00:03:36

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!