How to display seconds in countdown timer in js

In JavaScript, you can implement a countdown timer and display the remaining seconds by using the setInterval() function: determine the number of seconds to count down; create the remaining seconds variable; use the setInterval() function to check the remaining seconds every second and Update the display; clear the timer when the remaining seconds reaches 0.

The countdown timer in JavaScript implements seconds display

In JavaScript, you can use the setInterval() function to Implement a countdown timer and display the remaining seconds. Here's how to do it:

Steps:

1. Determine the number of seconds you want to count down.
2. Create a variable to store the remaining seconds.
3. Use the setInterval() function to check the remaining seconds every second and update the display.
4. When the remaining seconds reaches 0, clear the timer.

Code example:

<code class="javascript">// 设定倒计时秒数
const totalSeconds = 60;

// 创建剩余秒数变量
let remainingSeconds = totalSeconds;

// 创建定时器，每秒检查剩余秒数
const timer = setInterval(() => {
  // 更新剩余秒数显示
  document.getElementById("timer").textContent = remainingSeconds;

  // 减少剩余秒数
  remainingSeconds--;

  // 当剩余秒数达到 0 时，清除定时器
  if (remainingSeconds === 0) {
    clearInterval(timer);
  }
}, 1000);</code>

Code explanation:

• totalSeconds The variable stores the number of seconds to count down.
• remainingSeconds The variable stores the remaining seconds and is updated each time the timer fires.
• setInterval() The function triggers a callback function every 1000 milliseconds (1 second).
• In the callback function, update the remaining seconds display, decrement the remaining seconds and check whether the remaining seconds are 0.
• If the remaining seconds are 0, clear the timer to stop the countdown.

The above is the detailed content of How to display seconds in countdown timer in js. For more information, please follow other related articles on the PHP Chinese website!