js의 카운트다운 타이머에 초를 표시하는 방법

JavaScript에서 초 표시 카운트다운 타이머를 구현하는 방법: 초를 저장하는 변수 초를 만듭니다. 1초 간격으로 카운트다운 함수를 호출하는 타이머를 만듭니다. 카운트다운 함수에서 초를 줄이고 HTML 타이머 요소의 시간을 업데이트합니다. 초가 0에 도달하면 타이머를 삭제합니다.

JavaScript에서 초 표시 카운트다운 타이머를 구현하는 방법

변수 및 타이머 만들기:

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

카운트다운 함수:

<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 class="html"><p id="timer"></p></code>

작동 방식 ：

1. 변수 및 타이머 생성: 초를 저장하는 변수 seconds를 생성하고, setInterval 함수를 사용하여 1초마다 countdown 함수를 호출하는 카운트다운 타이머를 생성합니다. . seconds 来存储秒数，并使用 setInterval 函数创建倒计时器，每隔 1 秒调用 countdown 函数。
2. countdown 函数：在 countdown 函数中，将 seconds 减一，并将其转换为字符串 "s" 格式。然后将更新后的时间显示在 HTML 中的 timer 元素中。
3. 清除计时器：当 seconds

위 내용은 js의 카운트다운 타이머에 초를 표시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!