So zeigen Sie Sekunden im Countdown-Timer in js an

So implementieren Sie einen Countdown-Timer für die Sekundenanzeige in JavaScript: Erstellen Sie die Variable seconds, um die Sekunden zu speichern. Erstellen Sie einen Timer, der die Countdown-Funktion in 1-Sekunden-Intervallen aufruft. Dekrementieren Sie in der Countdown-Funktion die Sekunden und aktualisieren Sie die Zeit im HTML-Timer-Element. Wenn die Sekunden 0 erreichen, löschen Sie den Timer.

So implementieren Sie einen Countdown-Timer für die Sekundenanzeige in JavaScript

Erstellen Sie Variablen und Timer:

<code class="js">let seconds = 10; // 初始秒数
let timer = setInterval(countdown, 1000); // 以 1 秒间隔调用 countdown 函数</code>

Countdown-Funktion:

<code class="js">function countdown() {
  seconds--; // 减少秒数
  let time = `${seconds}s`; // 转换为 "s" 格式
  document.getElementById("timer").innerHTML = time; // 更新 HTML 中的计时器元素

  // 当秒数为 0 时，清除计时器
  if (seconds <= 0) {
    clearInterval(timer);
  }
}</code>

HTML-Code:

<code class="html"><p id="timer"></p></code>

Wie es funktioniert:

1. Variablen und Timer erstellen: Erstellen Sie eine Variable seconds, um Sekunden zu speichern, und verwenden Sie die Funktion setInterval, um einen Countdown-Timer zu erstellen, indem Sie alle 1 Sekunde die Funktion countdown aufrufen . seconds 来存储秒数，并使用 setInterval 函数创建倒计时器，每隔 1 秒调用 countdown 函数。
2. countdown 函数：在 countdown 函数中，将 seconds 减一，并将其转换为字符串 "s" 格式。然后将更新后的时间显示在 HTML 中的 timer 元素中。
3. 清除计时器：当 seconds

Countdown-Funktion: 🎜In der Funktion countdown dekrementieren Sie Sekunden um eins und konvertieren Sie sie in das Zeichenfolgenformat „s“. Die aktualisierte Zeit wird dann in einem timer-Element in HTML angezeigt. 🎜🎜🎜Timer löschen: 🎜Wenn Sekunden 0 erreicht, verwenden Sie „clearInterval“, um den Timer zu löschen und den Countdown zu stoppen. 🎜🎜

Das obige ist der detaillierte Inhalt vonSo zeigen Sie Sekunden im Countdown-Timer in js an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!