Question

我有倒数计时器，每次刷新页面或关闭选项卡后都会重置如何在刷新或关闭页面后继续计时器，以便之后我可以将该时间插入数据库中。我还想为 after serval 时间设置 setInterval 以更新时间并存储该时间。

这里是html代码：

 var h1 = document.getElementById("displaytime"),
  start = document.getElementById("start"),
  reset = document.getElementById("reset"),
  pause = document.getElementById("pause"),
  reset_timer =  document.getElementById("displaytime"),
  seconds = 0,
  minutes = 0,
  hours = 0,
  count = 0,
  t = -1;

function timer() {
  t = setTimeout(add, 1000);
}

function add() {  
  seconds++;
  if (seconds >= 60) {
    seconds = 0;
    minutes++;
    if (minutes >= 60) {
      minutes = 0;
      hours++;
    }
  }

  h1.textContent =
    (hours ? (hours > 9 ? hours : "0" + hours) : "00") +
    ":" +
    (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") +
    ":" +
    (seconds > 9 ? seconds : "0" + seconds);

  timer();
}

function display_timer() {
  count++;
  console.log(displaytime);
}
setInterval(display_timer ,5000);

start.addEventListener("click", function() {
    seconds = 0; minutes = 0; hours = 0;
    clearInterval(t);
    timer();
});

reset.addEventListener("click", function() {
    clearTimeout(t);
    reset_timer.innerHTML = '00:00:00';
    pause.innerHTML = 'Pause';
});

pause.addEventListener('click', function(e) {
    if (t == -1) {
        pause.innerHTML = 'Pause';
        timer();
    } else {
        pause.innerHTML = "Resume";
        clearInterval(t);
        t = -1;
    }
});

<html>

    <head>
        <title>Timer</title>
    </head>
    <body>
        
        <div class="Timer">
            <section id="stopWatch"> 
                <h1 id="displaytime">00:00:00</h1>
                <button id="start">Start</button>
                <button id="pause">Pause</button>
                <button id="reset" >Reset</button>
            </section> 
        </div>
    </body>
</html>

防止计时器在页面刷新站点后重置

0 个答案: