时间戳

首页 > 解决方案 > 防止在页面刷新时重置倒数计时器 - Django & JS

javascript - 防止在页面刷新时重置倒数计时器 - Django & JS

问题描述

我正在研究 Django，我想创建一个倒数计时器，一旦计时器达到 0 分钟，就会启用“完成”按钮。单击“完成”后，用户获得积分，现在我应该确保用户仅获得一次积分。我想在一次使用后为用户禁用“完成”按钮。

HTML

<div class="row">
    <span class="col-3" id="countdown">
        <button id="startClock">Start Timer</button>
    </span>
    <span class="col-1"></span>
    <button class="col-2" id="done">Done!</button>
</div>

<script>
$('#done').hide();

jQuery(function($){
   $('#startClock').on('click', doCount);
});

function doCount(){
    var timer2 = "10:01";
    var interval = setInterval(function() {

  var timer = timer2.split(':');
  //by parsing integer, I avoid all extra string processing
  var minutes = parseInt(timer[0], 10);
  var seconds = parseInt(timer[1], 10);
  --seconds;
  minutes = (seconds < 0) ? --minutes : minutes;
  seconds = (seconds < 0) ? 59 : seconds;
  seconds = (seconds < 10) ? '0' + seconds : seconds;
  $('#countdown').html(minutes + ':' + seconds);
  if (minutes < 0)
      clearInterval(interval);
  //check if both minutes and seconds are 0
  if ((seconds <= 0) && (minutes <= 0)){
      clearInterval(interval);
      $('#done').show();
  }

  timer2 = minutes + ':' + seconds;
   }, 1000);
}
</script>

标签： javascriptpythondjango

解决方案

您可以只创建一个变量来跟踪用户是否单击了完成按钮。

let isDone = false;
isDone = true;

您也可以为此使用 localStorage。这样，即使用户刷新浏览器，您也可以访问该值。

请注意，它可以被绕过，因此请确保您在服务器端进行了一些验证。

例子：

localStorage.setItem("done", true);

希望这可以帮助！

推荐阅读