使用cookie来维护持久倒计时计时器时，“勾选”问题

Question

以下问题需要研究下列外部资源：

• jQuery倒计时
• JavaScript Cookie

不，这不是另一个"Cookie Timer不起作用“的问题。;)

我已经构建了一个持久倒计时计时器，它使用cookie保存特定用户的倒计时状态，而不管浏览器重新加载或重新启动。一切都很好，除了我使用jQuery倒计时的“滴答”来创建回调…

实际上，如果我让计时器在不重新加载页面的情况下运行，回调就会工作。但是，一旦页面重新加载，其中一个回调就不起作用了，其中一个就起作用了。

不管如何工作的回调都是检查计时器结束的回调。不能工作的(重新加载后)是检查“中途”点的那个。

这是代码…

$(document).ready(function()
{
   if (!Cookies.get('cdTime'))
   {
      var now = $.now(); // First time on page
      var timerSet = 30; // Amout of time (sec)
      var halfway = timerSet / 2;
      Cookies.set('firstTime', now,
      {
         expires: 7,
         path: '/'
      });
      Cookies.set('cdTime', timerSet,
      {
         expires: 7,
         path: '/'
      });
      var runTimer = Cookies.get('cdTime');
   }
   else
   {
      var currentTime = $.now();
      var usedTime = (currentTime - Cookies.get('firstTime')) / 1000; // Calculate and convert to sec
      var runTimer = Cookies.get('cdTime') - usedTime;
   }
   $('#cd').countdown({
      until: runTimer,
      compact: true,
      onExpiry: endCountdown,
      onTick: callBacks,
      layout: '{sn} seconds left...'
   });

   function callBacks(periods)
   {
      if ($.countdown.periodsToSeconds(periods) <= halfway)
      {
         $('#cd').addClass('halfway');
      }
      else if ($.countdown.periodsToSeconds(periods) === 0)
      {
         endCountdown();
      }
   }

   function endCountdown()
   {
      $('#cd').removeClass('halfway').addClass('ended');
      $('#cd').html('&#9829;');
   }
});

body {
    margin: 1em;
    font: 2em/1.4em 'Helvetica Neue', 'Helvetica','Arial', sans-serif;
    color: #333;
}
#cd {
    margin-top: 2em;
   font-family: 'Source Code Pro','Andale Mono',Monaco,'Courier New',monospace;
   font-size: 30px;
    font-weight: 100;
}
.halfway {
    color: #0000ff;
}
.ended {
    color: #ff0000;
   font-size: 125% !important;
   line-height: 0;
}
header, footer
{
   width:66%;
   font-size: 18px;
    line-height: 1.4em;
}
footer
{
   position: absolute;
   bottom: 0;
   margin-bottom: 1.5em;
   font-style: italic;
   color:  #ffa500;
}
.highlight
{
   background: #FFFBCC;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-countdown/2.0.2/jquery.plugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-countdown/2.0.2/jquery.countdown.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.3/js.cookie.min.js"></script>
<header>This countdown timer uses <a href="http://keith-wood.name/countdown.html">jQuery Countdown</a>, by Keith Wood, and <a href="https://github.com/js-cookie/js-cookie">JavaScript Cookie</a> to work &#8212; it will continue itsa countdown regardless of browser reloads or reboots (really, try it!). <span class="highlight">Oh, and it works on mobile too</span>.</header>
<div id="cd"></div>
<footer>(Clear the “firstTime” and “cdTime" Cookies and then reload the page to start the timer over.)</footer>

​

在这里可以找到一个有用的例子：

http://codepen.io/ProfessorSamoff/pen/xqXrgx

在不重新加载页面的情况下观看它一次，然后按照屏幕上的说明重新启动计时器，然后重新加载。

知道为什么会发生这种事吗？

谢谢!

时间

Answer 1

我不是百分之百，但我认为halfway是没有定义的。它只在第一次加载页面时获得设置。

而不是if ($.countdown.periodsToSeconds(periods) <= halfway)，尝试一下if ($.countdown.periodsToSeconds(periods) <= halftime)

在顶部，而不是var timerSet = 30;之前的第一个if语句放置totalTime = 30;和halftime = Math.floor(totalTime / 2)