设置倒数计时器的日期

Question

我需要在我的网站上设置倒数计时器。我有一个截止日期，现在计时器需要倒计时到那个日期。

我当前的代码是：

  <script>
                    function getTimeRemaining(endtime) {
              var t = Date.parse(endtime) - Date.parse(new Date());
              var seconds = Math.floor((t / 1000) % 60);
              var minutes = Math.floor((t / 1000 / 60) % 60);
              var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
              var days = Math.floor(t / (1000 * 60 * 60 * 24));
              return {
                'total': t,
                'days': days,
                'hours': hours,
                'minutes': minutes,
                'seconds': seconds
              };
            }

            function initializeClock(id, endtime) {
              var clock = document.getElementById(id);
              var daysSpan = clock.querySelector('.days');
              var hoursSpan = clock.querySelector('.hours');
              var minutesSpan = clock.querySelector('.minutes');
              var secondsSpan = clock.querySelector('.seconds');

              function updateClock() {
                var t = getTimeRemaining(endtime);

                daysSpan.innerHTML = t.days;
                hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
                minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
                secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

                if (t.total <= 0) {
                  clearInterval(timeinterval);
                }
              }

              updateClock();
              var timeinterval = setInterval(updateClock, 1000);
            }

            var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
            initializeClock('clockdiv', deadline);
        </script>

使用此代码，每次我访问我的网站时，计时器都会从“15 天”开始倒计时。

Answer 1

有时需要为不止当前页面保留时钟状态。例如，如果我们想要整个站点倒计时 10 分钟，我们不希望每次用户转到不同页面或每次用户刷新他们所在的页面时都重置时钟。

一种解决方案是将时钟的结束时间保存在 cookie 中。这样，导航到新页面不会将结束时间重置为十分钟后。

逻辑如下：

如果 cookie 中记录了截止日期，则使用该截止日期。
如果 cookie 不存在，请设置新的截止日期并将其存储在 cookie 中。

要实现这一点，请将 deadline 变量替换为以下内容：

// if there's a cookie with the name myClock, use that value as the deadline
if(document.cookie && document.cookie.match('myClock')){
  // get deadline value from cookie
  var deadline = document.cookie.match(/(^|;)myClock=([^;]+)/)[2];
}

// otherwise, set a deadline 10 minutes from now and 
// save it in a cookie with that name
else{
  // create deadline 10 minutes from now
  var timeInMinutes = 10;
  var currentTime = Date.parse(new Date());
  var deadline = new Date(currentTime + timeInMinutes*60*1000);

  // store deadline in cookie for future reference
  document.cookie = 'myClock=' + deadline + '; path=/; domain=.yourdomain.com';
}

已编辑：

您也可以删除您的代码

var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);

并替换为这一行。您将为倒计时创建日期

var deadline = 'December 31 2018 23:59:59 GMT+0200';

这是完整代码：

function getTimeRemaining(endtime) {
                
  var t = Date.parse(endtime) - Date.parse(new Date());
  var seconds = Math.floor((t / 1000) % 60);
  var minutes = Math.floor((t / 1000 / 60) % 60);
  var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
  var days = Math.floor(t / (1000 * 60 * 60 * 24));
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}

function initializeClock(id, endtime) {
  var clock = document.getElementById(id);
  var daysSpan = clock.querySelector('.days');
  var hoursSpan = clock.querySelector('.hours');
  var minutesSpan = clock.querySelector('.minutes');
  var secondsSpan = clock.querySelector('.seconds');

  function updateClock() {
    var t = getTimeRemaining(endtime);

    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

    if (t.total <= 0) {
      clearInterval(timeinterval);
    }
  }

  updateClock();
  var timeinterval = setInterval(updateClock, 1000);
}

var deadline = 'December 31 2018 23:59:59 GMT+0200';
initializeClock('clockdiv', deadline);

body{
 text-align: center;
 background: #fff;
  font-family: sans-serif;
  font-weight: 100;
}

#clockdiv{
 font-family: sans-serif;
 color: #fff;
 display: inline-block;
 font-weight: 100;
 text-align: center;
 font-size: 30px;
}

#clockdiv > div{
 padding: 10px;
 border-radius: 3px;
 background: #a9a9a9;
 display: inline-block;
}

#clockdiv div > span{
 padding: 15px;
 border-radius: 3px;
 background: #585858;
 display: inline-block;
}

.smalltext{
 padding-top: 5px;
 font-size: 16px;
}

<div id="clockdiv">
  <div>
    <span class="days"></span>
    <div class="smalltext">Days</div>
  </div>
  <div>
    <span class="hours"></span>
    <div class="smalltext">Hours</div>
  </div>
  <div>
    <span class="minutes"></span>
    <div class="smalltext">Minutes</div>
  </div>
  <div>
    <span class="seconds"></span>
    <div class="smalltext">Seconds</div>
  </div>
</div>

设置倒数计时器的日期

Set date for countdown timer

javascript

html

countdown