WordPress更新JavaScript秒表

Question

我有这个正在工作的JavaScript秒表。该功能是当用户单击“开始”按钮开始和暂停按钮以暂停秒表。变量秒表保存在LocalStorage中，当用户刷新网站并再次开始时，秒表从最后一个秒表时间 + 1开始继续。第一个计时器正在工作，但是我将拥有一个相同容器的数组，从包含秒表时间的数据库中获取。问题在于我的循环。如何为每个计时器容器添加计时器，并从上次保存 + 1开始并从那里继续。我提供一个例子，也许有人可以帮助我。

HTML

<div class="c-add-task-main-container">
    <h2 class="c-add-task-title">Time Tracker</h2>
    <button class="start">Start</button>
    <button class="pause">Pause</button>
    <button class="clear">Clear</button>
    <div class="output">00:34:21</div>
</div>

<div class="c-add-task-main-container">
    <h2 class="c-add-task-title">Time Tracker</h2>
    <button class="start">Start</button>
    <button class="pause">Pause</button>
    <button class="clear">Clear</button>
    <div class="output">21:56:22</div>
</div>

<div class="c-add-task-main-container">
    <h2 class="c-add-task-title">Time Tracker</h2>
    <button class="start">Start</button>
    <button class="pause">Pause</button>
    <button class="clear">Clear</button>
    <div class="output">32:47:35</div>
</div>

<div class="c-add-task-main-container">
    <h2 class="c-add-task-title">Time Tracker</h2>
    <button class="start">Start</button>
    <button class="pause">Pause</button>
    <button class="clear">Clear</button>
    <div class="output">11:29:03</div>
</div>

<div class="c-add-task-main-container">
    <h2 class="c-add-task-title">Time Tracker</h2>
    <button class="start">Start</button>
    <button class="pause">Pause</button>
    <button class="clear">Clear</button>
    <div class="output">04:01:14</div>
</div>

JS

    let showTime = document.querySelector(".output");
    let startTimeButton = document.querySelector(".start")
    let pauseTimeButton = document.querySelector(".pause")

    let seconds = 0;
    let interval = null;
    if (localStorage.getItem("stopwatchSeconds") != null) {
        seconds = parseInt(localStorage.getItem("stopwatchSeconds"));
    }

    const timer = () => {
        seconds++;

        localStorage.setItem("stopwatchSeconds", seconds);


        // Get hours
        let hours = Math.floor(seconds / 3600);
        // Get minutes
        let minutes = Math.floor((seconds - hours * 3600) / 60);
        // Get seconds
        let secs = Math.floor(seconds % 60);

        if (hours < 10) {
            hours = `0${hours}`;
        }
        if (minutes < 10) {
            minutes = `0${minutes}`;
        }
        if (secs < 10) {
            secs = `0${secs}`;
        }

        showTime.innerHTML = `${hours}:${minutes}:${secs}`;

    };

    startTimeButton.addEventListener("click", () => {
        pauseTimeButton.style.display = "block";
        startTimeButton.style.display = "none";
        console.log("START TIME CLICKED");

        if (interval) {
            return;
        }

        interval = setInterval(timer, 1000);
    });

    // Pause function
    pauseTimeButton.addEventListener("click", () => {
        pauseTimeButton.style.display = "none";
        startTimeButton.style.display = "block";
        console.log("PAUSE TIME CLICKED");
        clearInterval(interval);
        interval = null;

    });

Answer 1

您可以尝试此片段

HTML

<div class="c-add-task-main-container" data-watch_no="01">
  <h2 class="c-add-task-title">Time Tracker 01</h2>
  <button class="start">Start</button>
  <button class="pause">Pause</button>
  <button class="clear">Clear</button>
  <div class="output"></div>
</div>

<div class="c-add-task-main-container" data-watch_no="02">
  <h2 class="c-add-task-title">Time Tracker 02</h2>
  <button class="start">Start</button>
  <button class="pause">Pause</button>
  <button class="clear">Clear</button>
  <div class="output"></div>
</div>

香草JS

let stop_watch_containers = document.querySelectorAll(".c-add-task-main-container");

stop_watch_containers.forEach((container) => {

    let start_button = container.querySelector(".start");
    let pause_button = container.querySelector(".pause");
    let clear_button = container.querySelector(".clear");
    let output = container.querySelector(".output");
    let localStorageKey = "watch" + container.dataset.watch_no;
    let seconds = localStorage.getItem(localStorageKey);

    if (isNaN(seconds)) {
        seconds = 0;
    }

    // set old time on page load
    output.innerHTML = timer();

    let interval;

    // start watch
    start_button.addEventListener("click", function () {
        clearInterval(interval);
        interval = setInterval(function () {
        output.innerHTML = timer();
        seconds++;
        }, 1000);
    });

    // pause watch
    pause_button.addEventListener("click", function () {
        clearInterval(interval);
        localStorage.setItem(localStorageKey, seconds);
    });

    // clear watch
    clear_button.addEventListener("click", function () {
        clearInterval(interval);
        seconds = 0;
        output.innerHTML = timer();
        localStorage.setItem(localStorageKey, 0);
    });

    function timer() {
        let hours = Math.floor(seconds / 3600);
        // Get minutes
        let minutes = Math.floor((seconds - hours * 3600) / 60);
        // Get seconds
        let secs = Math.floor(seconds % 60);

        if (hours < 10) {
        hours = `0${hours}`;
        }
        if (minutes < 10) {
        minutes = `0${minutes}`;
        }
        if (secs < 10) {
        secs = `0${secs}`;
        }
        return `${hours}:${minutes}:${secs}`;
    }
});

Answer 2

将间隔和计时器保存在array 中，让sepseds = [] ，然后我简化了您的代码，开始和暂停按钮， if（time＆lt; 10）用 noreflow noreferrer“> .padstart（） /a>

在

let startTimeButtons = document.querySelectorAll(".start")

let seconds = [0, 0];
let interval = [];
if (localStorage.getItem("stopwatchSeconds") != null) {
  seconds = JSON.parse(localStorage.getItem("stopwatchSeconds"));
  seconds = seconds.map(n => parseInt(n))
}

const timer = (el, i) => {
  seconds[i]++;
  localStorage.setItem("stopwatchSeconds", JSON.stringify(seconds));
  // Get hours
  let hours = Math.floor(seconds[i] / 3600).toString().padStart(2, 0);
  // Get minutes
  let minutes = Math.floor((seconds[i] - hours * 3600) / 60).toString().padStart(2, 0);
  // Get seconds
  let secs = Math.floor(seconds[i] % 60).toString().padStart(2, 0);

  el.parentElement.querySelector('.output').innerHTML = `${hours}:${minutes}:${secs}`;

};

startTimeButtons.forEach((btn, index) => {
  timer(btn, index); // update time on page load
  btn.addEventListener("click", () => {
    if (btn.textContent == 'Start') {
      btn.textContent = 'Pause';
      interval[index] = setInterval(timer, 1000, btn, index);
    } else {
      btn.textContent = 'Start';
      clearInterval(interval[index]);
    }
  });
})

<div class="c-add-task-main-container">
    <h2 class="c-add-task-title">Time Tracker</h2>
    <button class="start">Start</button>
    <button class="clear">Clear</button>
    <div class="output">00:00:00</div>
</div>

<div class="c-add-task-main-container">
    <h2 class="c-add-task-title">Time Tracker</h2>
    <button class="start">Start</button>
    <button class="clear">Clear</button>
    <div class="output">00:00:00</div>
</div>