一个页面多个倒计时

示例用了JQuery

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>同页面多个倒计时（非插件）</title>
  <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.1.min.js"></script>
</head>

<body>
  <div id="showtime"></div>
  <div id="showtime-one"></div>
  <div id="showtime-two"></div>
  <script type="text/javascript">
    function groupTimer(nowDate, logDate, timeLimit, id) {
      this.nowDate = nowDate;
      this.timeLimit = timeLimit;
      this.logDate = logDate;
      this.id = id;
      //有时候json返回的时间格式不符合要求,需要把“-”全部替换成“/”
      var intDiff1 = (this.nowDate).replace(/\-/g, "/");
      var intDiff2 = (this.logDate).replace(/\-/g, "/");
      var remindTime = (new Date(intDiff1).getTime() - new Date(intDiff2).getTime()) / 1000;
      var intDiff = (this.timeLimit) * 60 * 60 - remindTime;
      this.intDiff = intDiff;
    }
    groupTimer.prototype.setTimeShow = (function () {
      var day = 0,
        hour = 0,
        minute = 0,
        second = 0; //时间默认值
      if (this.intDiff > 0) {
        hour = Math.floor((this.intDiff / 3600));
        minute = Math.floor((this.intDiff / 60) % 60);
        second = Math.floor(this.intDiff % 60);
        if (hour <= 9) hour = '0' + hour;
        if (minute <= 9) minute = '0' + minute;
        if (second <= 9) second = '0' + second;
        $("#showtime-" + this.id).html("剩余" + hour + ":" + minute + ":" + second + "结束");
        var self = this;
        setTimeout(function () {
          self.setTimeShow();
        }, 1000); //D:正确
      } else {
        $("#showtime-" + this.id).html("活动已结束");
      }
      this.intDiff--;
    })
    //var gt = new groupTimer(item.NowDate, item.LogDate, item.TimeLimit);
    //NowDate为当前时间,LogDate为开始时间,TimeLimi为规定时限，设置id是为了区分多个倒计时
    var gt = new groupTimer("2017-01-22 17:59:50", "2017-01-21 18:00:00", "24", "one");
    gt.setTimeShow();

    var gt2 = new groupTimer("2017-01-23 16:00:00", "2017-01-21 18:00:00", "48", "two");
    gt2.setTimeShow();
  </script>

</body>

</html>
posted @ 2017-10-26 16:08  EuniceShaw  阅读(196)  评论(0)    收藏  举报