如何检查智能倒数计时器启动

Question

我创建在线考试系统，我创建不同的考试和不同的时间分配，我点击任何考试累积到倒数计时器启动， 见下面的截图

截图-1

截图-2

查看：

df1 <- structure(list(Col = c(201601L, 201603L, 201604L, 201606L, 201501L
 )), .Names = "month_key", class = "data.frame", row.names = c(NA, -5L))

我的问题：我点击不同的考试和考试倒数计时器开始。但我有问题我点击任何考试和倒数计时器继续

Answer 1

就像我在另一个帖子中说的那样，你需要从LocalStorage中删除倒计时。要实现此目的，您需要对已定义的事件执行此操作，例如按钮单击或其他任何操作。

function resetCountdownInLocalStorage(){
    localStorage.removeItem("seconds");
}

您可以调用此操作，就像我在“下一步”按钮的单击事件或每次重新启动测试时所提到的那样。

例如，如果您想在“下一步”按钮上调用此操作，并且我们假设该按钮具有Id next，您可以使用此javascript代码段来实现所请求的操作：

document.getElementById("next").onclick = function() {       
     localStorage.removeItem("seconds");
}

或使用上面的功能：

 document.getElementById("next").onclick = resetCountdownInLocalStorage;

Answer 2

根据您的问题，我认为您需要一组独立工作的计时器。我创造了一个例子。请查看此Fiddle

<强> HTML

<div class="timer" started="false" timerObj="" value="10">
Start Timer
<div id="timer1"></div>
</div>
<br>
<div class="timer" started="false" timerObj="" value="10">
Start Timer
<div id="timer2"></div>
</div>
<br>
<div class="timer" started="false" timerObj="" value="10">
Start Timer
<div id="timer3"></div>
</div>

<强> CSS

.timer {
    border-radius: 2px;
    background: #73AD21;
    padding: 20px;
    width: 100px;
    height: 20px;
}

<强> JS

$(document).ready(function() {  
  function myTimer(resultDivId) {
    var currentVal = $("#"+ resultDivId).parent().attr("value");
    currentVal--;
    if(currentVal == 0) {
       var timerObj = $("#"+ resultDivId).parent().attr('timerObj');
       clearInterval(timerObj);
    }
    $("#"+ resultDivId).html(currentVal);
    $("#"+ resultDivId).parent().attr("value",currentVal);
  }

  $(".timer").click(function(){
    if ($(this).attr('started') == "false") {
      var currentDivId = $(this).children('div').prop("id"); 
      var timerObj = setInterval(function(){ myTimer(currentDivId) }, 1000);
      $(this).attr('started','true');
      $(this).attr('timerObj',timerObj);
    }
    else {
       var timerObj = $(this).attr('timerObj');
       clearInterval(timerObj);
    }
  });
});

单击div时，计时器将启动。如果您第二次单击div，它将停止。您还可以为每个div设置单独的倒计时。