Question

如何为此倒计时器设置cookie？当我刷新页面时，cookie应该阻止重置计时器。

<div id="hms">02:00:00</div>
<script type="text/javascript">
    function count() {
        var startTime = document.getElementById('hms').innerHTML;
        var pieces = startTime.split(':');
        var time = new Date();
        time.setHours(pieces[0]);
        time.setMinutes(pieces[1]);
        time.setSeconds(pieces[2]);
        var timedif = new Date(time.valueOf() - 1000);
        var newtime = timedif.toTimeString().split(' ')[0];
        document.getElementById('hms').innerHTML = newtime;
        setTimeout(count,1000);
    }
    count();
</script>

Answer 1

问题是如果你在刷新之前在cookie中保存时间并在页面加载后检索它可能与实际当前时间不匹配，因为页面可能需要花费任意时间来刷新，第一次它可能是1秒第二次可能更快并且由于诸如缓存等因素在较慢网络上的用户可能总是超过1-2秒。因此，页面上的时间将始终滞后，并且在刷新几次后将与实际当前时间不匹配。

看起来我错了浏览器不刷新页面上已有的内容，直到下载了所有必需的资源，这样你的计数器就会继续运行，并设置cookie直到准备就绪

这是我的工作

<html>
<body>
<div id="hms">02:00:00</div>
</body>

<script>
var startTime;
function getCookie(name) {
  var value = "; " + document.cookie;
  var parts = value.split("; " + name + "=");
  if (parts.length == 2) return parts.pop().split(";").shift();
} // credits kirlich @http://stackoverflow.com/questions/10730362/get-cookie-by-name

function count() {
 if(typeof getCookie('remaining')!= 'undefined')
 {
   startTime = getCookie('remaining');
 }
 else if(document.getElementById('hms').innerHTML.trim()!='')
 {
   startTime = document.getElementById('hms').innerHTML;
 }
 else
 {
  var d = new Date(); 
  var h=d.getHours(); 
  var m=d.getMinutes();
  var s=d.getSeconds();
  startTime = h+':'+m+':'+s;
  //OR
  startTime  = d.toTimeString().split(" ")[0]
 }

 var pieces = startTime.split(":");
 var time = new Date();
 time.setHours(pieces[0]);
 time.setMinutes(pieces[1]);
 time.setSeconds(pieces[2]);
 var timediff = new Date(time.valueOf()-1000)
 var newtime = timediff.toTimeString().split(" ")[0];
 document.getElementById('hms').innerHTML=newtime ;
 document.cookie = "remaining="+newtime;
 setTimeout(count,1000);
}
count();
</script>

</html>

PS：尝试并测试倒计时幸存页面刷新，即使在重页限制中也是准确的> 10秒！

如果您不想要当前时间但输入任何手动时间，您可以随时调整值以获得所需效果。

Answer 2

我认为您需要使用document.cookie = newtime。因此，每当您在同一时间为元素分配newtime时，也应该将newtime分配给cookie，这样就不会丢失。

Answer 3

简单：

让我们假设您需要2个时钟，每个时钟具有不同的持续时间（如果您需要2个以上的时钟，或者仅需要一个，只需外推解释）。

设置运行和停止的时钟样式：


       .runningClock, stoppedClock
          {width:75px;
           color:white;           
           font-weight:bold;
           border:3px double white
          }
    
       .runningClock { background:#1ABB9C;  /* use your favorite green/turquoise */ }
       .stoppedClock { background:red; }

在HTML中使用ID创建每个时钟（我正在使用DIV，但是它可以是TD，SPAN或其他块对象）[忽略下面的多余空格，在此处键入以使代码可见]：

在您的JS块中，构建以下两个函数：


    function Secs2Clock( numSecs ) { // converts # of seconds to a digital clock format )
        return ( parseInt( numSecs /3600 ).toString().padStart(2,"0") + ':' +
                 (parseInt( (numSecs /60) )%60).toString().padStart(2,"0") + ':' +
                 parseInt( numSecs %60 ).toString().padStart(2,"0") );
    }
    
    function runClock( oneClock, hours, minutes ) {
      var secs=hours*minutes*60;
              
      oneClock.className="runningClock"; // sets it to paint green, running
              
      var runningClock=setInterval( function() { //starts clock refreshing by second
         oneClock.innerHTML = Secs2Clock( secs );
    
         if ( secs>0 ) secs--  // single instruction if true, feel free to add curled brackets for readability
            else {
                oneClock.innerHTML="00:00:00";
                oneClock.className="stoppedClock";
                clearInterval( runningClock );
            }
    
        }, 1000     
      );
       
    }

在您的主要JS块（或“ BODY onLoad”函数中，或您希望启动时钟的任何位置）内，为每个时钟添加此行（在此示例中，为2个不同的时钟）；或在onClick动作或您希望特定时钟开始的任何动作（HREF单击等）中（在此示例中，这是主要JS代码的一部分，以两个剩余时间启动两个时钟）


    runClock( clock1, 1, 0 );   // will start as "01:00:00"
    runClock( clock2, 6, 30 );  // will start as "06:30:00"

倒数计时器，包括小时，分钟和秒

3 个答案: