Question

我有倒计时脚本，如果我重新加载页面，它会重新开始。我需要让它工作到某个日期。

以下是倒数计时器视图的链接，您也可以下载并使用它或查看代码：https://timer.craftovdvlp.club/

这是脚本：

＆＃13;

$(document).ready(function() {

  $('#countdown2').ClassyCountdown({
    end: '1388468325',
    now: '1378441323',
    labels: true,
    style: {
      element: "",
      textResponsive: .5,
      days: {
        gauge: {
          thickness: .01,
          bgColor: "rgba(0,0,0,0.05)",
          fgColor: "#1abc9c"
        },
        textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#34495e;'
      },
      hours: {
        gauge: {
          thickness: .01,
          bgColor: "rgba(0,0,0,0.05)",
          fgColor: "#2980b9"
        },
        textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#34495e;'
      },
      minutes: {
        gauge: {
          thickness: .01,
          bgColor: "rgba(0,0,0,0.05)",
          fgColor: "#8e44ad"
        },
        textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#34495e;'
      },
      seconds: {
        gauge: {
          thickness: .01,
          bgColor: "rgba(0,0,0,0.05)",
          fgColor: "#f39c12"
        },
        textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#34495e;'
      }

    },
    onEndCallback: function() {
      console.log("Time out!");
    }
  });

});

＆＃13;

<link href="http://timer.craftovdvlp.club/css/jquery.classycountdown.css" rel="stylesheet" />
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://timer.craftovdvlp.club/js/jquery.classycountdown.js"></script>

<script src="http://timer.craftovdvlp.club/js/jquery.knob.js"></script>
<script src="http://timer.craftovdvlp.club/js/jquery.throttle.js"></script>

<div class="container">

  <div id="countdown2" class="ClassyCountdownDemo"></div>

</div>

＆＃13;

P.S。如果有人知道或知道漂亮的线路倒计时器的链接，我将非常感谢帮助）

Answer 1

每当您重新加载页面时，内存都将重置。尝试使用像cookie这样存储计时器结束日期的持久性内容。

每次重新加载页面时都应创建now，如@Himanshu Upadhyay的回答和@Santi.com的评论中所述。

即

var end = document.cookie.replace(/(?:(?:^|.*;\s*)timerEnd\s*\=\s*([^;]*).*$)|^.*$/, "$1");
end = end || '' + Date.now() + 15 * 60 * 1000; // 15 minutes
document.cookie='timerEnd=' end;
$('#countdown2').ClassyCountdown({
    end: end,
    now: '' + Date.now(),
    // ...etc

Answer 2

现在获取当前时间变量：

$(document).ready(function() {
    var d = new Date();
    var now = d.getTime();

    $('#countdown2').ClassyCountdown({
        end: '1388468325',
        now: now,
        ....
    });
});

如果我重新加载页面，则倒计时重置 - 需要将其设置为某个日期

2 个答案: