Question

我在此网站找到了此代码：https://www.sitepoint.com/build-javascript-countdown-timer-no-dependencies。此代码提供倒计时器，可在页面刷新时重置。

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);

稍后在文章中作者说要在上面的代码中实现以下代码，以获得一个不会在页面刷新时重置的计时器。由于我是初学者，我无法正确实现代码。那么请你帮我做好。感谢。

以下是代码和作者指示：

维护页面的时钟进度

有时需要保留时钟状态而不仅仅是当前页面。例如，如果我们希望整个网站倒计时十分钟，我们就不希望每次用户访问不同的页面或每次用户刷新他们所在的页面时重置时钟。

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

这是逻辑：

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

要实现此目的，请使用以下内容替换截止日期变量：

 // 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';
 }

Answer 1

这是代码（虽然我不建议只通过复制/粘贴来学习编程）：

<html>
    <head>
        <title>Timer</title>
        <script>
        var timeoutHandle;
        function countdown(minutes,stat) {
            var seconds = 60;
            var mins = minutes;

        if(getCookie("minutes")&&getCookie("seconds")&&stat)
        {
            var seconds = getCookie("seconds");
            var mins = getCookie("minutes");
        }

        function tick() {

            var counter = document.getElementById("timer");
            setCookie("minutes",mins,10)
            setCookie("seconds",seconds,10)
            var current_minutes = mins-1
            seconds--;
            counter.innerHTML = 
            current_minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);
            //save the time in cookie

            if( seconds > 0 ) {
                timeoutHandle=setTimeout(tick, 1000);
            } else {

                if(mins > 1){  
                setTimeout(function () { countdown(parseInt(mins)-1,false); }, 1000);

                }
            }
        }
        tick();
    }
    function setCookie(cname,cvalue,exdays) {
        var d = new Date();
        d.setTime(d.getTime() + (exdays*24*60*60*1000));
        var expires = "expires=" + d.toGMTString();
        document.cookie = cname+"="+cvalue+"; "+expires;
    }
    function getCookie(cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for(var i=0; i<ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0)==' ') c = c.substring(1);
            if (c.indexOf(name) == 0) {
                return c.substring(name.length, c.length);
            }
        }
        return "";
    }
    window.onload = function startingTimer(){
        //countdown(prompt("Enter how many minutes you want to count down:"),true);
          countdown(2,true);
    }
    </script>
</head>
<body>
<div id="timer">00:00:00</div>
</body>
</html>

注意：此代码不是我的，我是从here获取的，并根据您的需要进行了一些编辑。

如何构建一个不会在页面刷新时重置的javascript倒计时器？

1 个答案: