我在使用 setInterval() 时遇到了一些问题

Question

I want my stopwatch as if 60 seconds complete . There should be an increment in minute and seconds to start from 0 again . I tried so many ways to do so but it always stop working when time is one minute .. is it built in problem in setInterval()

async timer() {


  var timeout = setInterval(() => {
    count++
    this.timerSecond.innerText = count;
    if (count > 59) {
      count = 0;
      this.timerSecond.innerText = count;
      count1++
      this.timerMinute.innerText = count1

    }
  }, 100);
  console.log(timeout);

  return timeout;
}

Answer 1

Does this method work for you?

timer () {
  let seconds = 0;

  const tick = () => {
    this.timerText.textContent = seconds;
    this.timerSecond.textContent = `${seconds % 60}`.padStart(2, '0');
    this.timerMinute.textContent = Math.floor(seconds / 60);
    seconds++;
  };

  tick();
  return setInterval(tick, 1000);
}

It's hard to tell why you had two separate setInterval() calls, but I removed the one called every 100 milliseconds and combined the logic into a single one.

The timerSecond uses modulo 60 of seconds , and timerMinute uses result of integer division by 60, while the timerText just receives the seconds directly, as in your initial code.

The async keyword didn't add any value to your code, since none of it uses promises, so I removed it.

Here's a slightly elaborated example to demonstrate functionality:

 class Stopwatch { timerText = document.querySelector('.text'); timerSecond = document.querySelector('.second'); timerMinute = document.querySelector('.minute'); timer () { let seconds = 0; const tick = () => { this.timerText.textContent = seconds; this.timerSecond.textContent = `${seconds % 60}`.padStart(2, '0'); this.timerMinute.textContent = Math.floor(seconds / 60); seconds++; }; tick(); return setInterval(tick, 1000); } } new Stopwatch().timer();

 <div class="text"></div> <div> <span class="minute"></span>:<span class="second"></span> </div>

Answer 2

This is nice and simple:

 var seconds = 0; setInterval(function(){ tick(document.getElementById("timer"), ++seconds); }, 1000); function tick(ele, secs){ ele.innerHTML = Math.floor(secs / 60) + ":" + (secs % 60 < 10 ? "0" : "") + secs % 60; }

 <span id="timer">0:00</span>

Math.floor(secs / 60) gives us the minutes and excludes any remainder of seconds, secs % 60 gives us the remainder of seconds after we've divided by 60 (so it essentially removes the minutes), and (secs % 60 < 10 ? "0" : "") gives us a leading "0" if the seconds (excluding whole minutes) is less than 10.

Answer 3

Here is a basic example of how to make a counter that counts down from 60 (or any other number) and display it on the page.

 // Reference to html element that holds the count const counterDiv = document.getElementById('counter'); // Variable that will keep track of the seconds to count down from const secondsToCount = 60; // Set the initial value of the counter to the secondsToCount variable. // The counter will be updated each 1000ms | 1s and will be changed // to the value of the remaining seconds to count down from // which is why this variable is let opposed to const let counter = secondsToCount; // Set the initial text of the counter html element counterDiv.innerHTML = secondsToCount; // Function that is going to do counting for us. const interval = setInterval( () => { // Decrement the current counter value by 1 counter--; // Update the text to show the new value of our counter counterDiv.innerHTML = counter; // If the counter is === 0, the counter is finished. She some text. if (counter === 0) { // Clear the interval (otherwise, you'll continue to count // into the negative numbers clearInterval(interval); // Show the completed text counterDiv.innerHTML = `Done counting down from ${secondsToCount} seconds`; } }, 1000); // 1000 ms | 1s

 <!-- Element used to show the count --> <div id="counter"></div>