如何使此计时器在页面加载后立即启动

Question

How can this particular code work on page load itself and even on refresh of page timer value remains ticking only when click submit it stops?

I guess we need to store the timer on localStorage and destroy storage on click submit?

 $(function() { // Some global variables var startTime = 0, elapsed = 0, timerId = 0, $timer = $("#timer"); function formatTime(time) { var hrs = Math.floor(time / 60 / 60 / 1000), min = Math.floor((time - hrs * 60 * 60 * 1000) / 60 / 1000), sec = Math.floor((time - hrs * 60 * 60 * 1000 - min * 60 * 1000) / 1000); hrs = hrs < 10? "0" + hrs: hrs; min = min < 10? "0" + min: min; sec = sec < 10? "0" + sec: sec; return hrs + ":" + min + ":" + sec; } function elapsedTimeFrom(time) { return formatTime(time - startTime + elapsed); } function showElapsed() { $timer.text(elapsedTimeFrom(Date.now())); } function startTimer() { // React only if timer is stopped startTime = startTime || Date.now(); timerId = timerId || setInterval(showElapsed, 1000); localStorage.setItem('startTime'); } function pauseTimer() { // React only if timer is running if (timerId) { clearInterval(timerId); elapsed += Date.now() - startTime; startTime = 0; timerId = 0; } } function resetTimer() { clearInterval(timerId); $timer.text("00:00:00"); startTime = 0; elapsed = 0; timerId = 0; } function editTimer() { pauseTimer(); $timer.prop("contenteditable", true); $timer.css("border", "1px solid red"); } function setElapsed() { var time = $timer.text(), arr = time.split(":"); $timer.prop("contenteditable", false); $timer.css("border", "1px solid black"); elapsed = parseInt(arr[0] * 60 * 60, 10); elapsed += parseInt(arr[1] * 60, 10); elapsed += parseInt(arr[2], 10); elapsed *= 1000; } function sendTime() { pauseTimer(); // Set hidden input value before send $("[name='time']").val(formatTime(elapsed)); } $("[name='start']").click(startTimer); $("[name='stop']").click(pauseTimer); $("[name='reset']").click(resetTimer); $timer.dblclick(editTimer); $timer.blur(setElapsed); $("form").submit(sendTime); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="timer">00:00:00</div> </h1> <form action="" method="post" ame="xyz"> <input type="button" name="start" value="Start" class="btn btn-primary mb-2"> <input type="button" name="stop" value="Stop" class="btn btn-primary mb-2"> <input type="submit" name="action" value="Submit" class="btn btn-primary mb-2"> <input type="hidden" name="time" value="00:00:00"> </form>

Answer 1

You need to set the variable in localStorage not just the name

I have commented out the calls since they do not work in StackSnippets

Just uncomment them when you copy to your server.

 $(function() { // Some global variables var startTime = 0; elapsed = 0, timerId = 0, $timer = $("#timer"); function formatTime(time) { var hrs = Math.floor(time / 60 / 60 / 1000), min = Math.floor((time - hrs * 60 * 60 * 1000) / 60 / 1000), sec = Math.floor((time - hrs * 60 * 60 * 1000 - min * 60 * 1000) / 1000); hrs = hrs < 10? "0" + hrs: hrs; min = min < 10? "0" + min: min; sec = sec < 10? "0" + sec: sec; return hrs + ":" + min + ":" + sec; } function elapsedTimeFrom(time) { return formatTime(time - startTime + elapsed); } function showElapsed() { $timer.text(elapsedTimeFrom(Date.now())); } function startTimer() { // React only if timer is stopped // startTime = localStorage.getItem('startTime') || Date.now(); startTime || Date.now(); // remove and uncomment above timerId = timerId || setInterval(showElapsed, 1000); // localStorage.setItem('startTime',startTime); } function pauseTimer() { // React only if timer is running if (timerId) { clearInterval(timerId); elapsed += Date.now() - startTime; startTime = 0; timerId = 0; } } function resetTimer() { clearInterval(timerId); $timer.text("00:00:00"); startTime = 0; elapsed = 0; timerId = 0; } function editTimer() { pauseTimer(); $timer.prop("contenteditable", true); $timer.css("border", "1px solid red"); } function setElapsed() { var time = $timer.text(), arr = time.split(":"); $timer.prop("contenteditable", false); $timer.css("border", "1px solid black"); elapsed = parseInt(arr[0] * 60 * 60, 10); elapsed += parseInt(arr[1] * 60, 10); elapsed += parseInt(arr[2], 10); elapsed *= 1000; } function sendTime() { pauseTimer(); // Set hidden input value before send $("[name='time']").val(formatTime(elapsed)); // localStorage.removeItem('startTime'); } $("[name='start']").click(startTimer); $("[name='stop']").click(pauseTimer); $("[name='reset']").click(resetTimer); $timer.dblclick(editTimer); $timer.blur(setElapsed); $("form").submit(sendTime); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="timer">00:00:00</div> </h1> <form action="" method="post" ame="xyz"> <input type="button" name="start" value="Start" class="btn btn-primary mb-2"> <input type="button" name="stop" value="Stop" class="btn btn-primary mb-2"> <input type="submit" name="action" value="Submit" class="btn btn-primary mb-2"> <input type="hidden" name="time" value="00:00:00"> </form>

Answer 2

function start_timer() {
  const pause_timestamp = localStorage.getItem('pause_timestamp');
  const start_timestamp = localStorage.getItem('start_timestamp');
  if (pause_timestamp) {
    localStorage.removeItem('pause_timestamp');
    localStorage.setItem('start_timestamp', Date.now() + (start_timestamp - pause_timestamp));
    return;
  }
  localStorage.setItem('start_timestamp', Date.now());
}

function reset_timer() {
  localStorage.removeItem('pause_timestamp');
  localStorage.setItem('start_timestamp', Date.now());
}

function pause_timer() {
  localStorage.setItem('pause_timestamp', Date.now());
}

function get_timer_ms() {
  const start_timestamp = localStorage.getItem('start_timestamp');
  const pause_timestamp = localStorage.getItem('pause_timestamp');
  if (!start_timestamp) {
    return 0;
  }
  if (pause_timestamp) {
    return pause_timestamp - start_timestamp;
  }
  return Date.now() - start_timestamp;
}

$("[name='start']").click(start_timer);
$("[name='stop']").click(pause_timer);
$("[name='reset']").click(reset_timer);

get_timer_ms() // timer value in ms