js에서 카운트다운 타이머를 구현하는 방법

JavaScript에서 카운트다운 타이머를 구현하는 방법에는 두 가지가 있습니다. setInterval(): 타이머를 만들고 지정된 밀리초마다 반복적으로 함수를 호출합니다. setTimeout(): 함수를 한 번만 호출하여 지정된 시간을 지연시킵니다.

JS에서 카운트다운 타이머 구현

JavaScript에서는 카운트다운 타이머를 구현하는 여러 가지 방법이 있습니다. 일반적으로 다음 두 가지 방법이 사용됩니다.

1. setInterval() 메서드

setInterval() 메서드는 지정된 밀리초 동안 함수를 반복적으로 호출하는 타이머를 생성합니다. setInterval() 메서드를 사용하여 카운트다운 타이머를 구현하려면 다음 단계를 따르세요. setInterval() 方法创建一个定时器，它以指定的毫秒数重复调用一个函数。要使用 setInterval() 方法实现倒计时器，请按以下步骤操作：

• 定义一个函数来更新倒计时。该函数应将当前时间与目标时间进行比较，并显示剩余时间。
• 计算剩余时间的毫秒数。
• 使用 setInterval() 方法每隔一定的毫秒数调用更新函数。
• 当倒计时结束时，清除 setInterval 定时器。

2. setTimeout() 方法

setTimeout() 方法仅调用一次函数，延迟指定的时间。要使用 setTimeout() 方法实现倒计时器，请按以下步骤操作：

• 定义一个递归函数来更新倒计时。该函数应将当前时间与目标时间进行比较，并显示剩余时间。
• 在函数中，计算剩余时间的毫秒数。
• 使用 setTimeout()
  • 카운트다운을 업데이트하는 함수를 정의하세요. 이 함수는 현재 시간을 목표 시간과 비교하여 남은 시간을 표시해야 합니다.
  • 남은 시간을 밀리초 단위로 계산하세요.
• 특정 밀리초마다 업데이트 함수를 호출하려면 setInterval() 메서드를 사용하세요.

• 카운트다운이 끝나면 setInterval 타이머를 지웁니다.

  2.setTimeout() 메소드

  setTimeout() 메소드는 함수를 한 번만 호출하여 지정된 시간을 지연시킵니다. setTimeout() 메서드를 사용하여 카운트다운 타이머를 구현하려면 다음 단계를 따르세요. 🎜
  • 카운트다운을 업데이트하는 재귀 함수를 정의하세요. 이 함수는 현재 시간을 목표 시간과 비교하여 남은 시간을 표시해야 합니다. 🎜
  • 함수에서 남은 밀리초 수를 계산합니다. 🎜
  • 남은 시간이 지난 후 이 함수를 호출하려면 setTimeout() 메서드를 사용하세요. 🎜🎜🎜🎜샘플 코드(setInterval() 메서드)🎜🎜

    <code>function updateCountdown() {
      const targetTime = new Date('2023-12-31');
      const currentTime = new Date();
      const msToTarget = targetTime - currentTime;
      const msToHours = Math.floor(msToTarget / (1000 * 60 * 60));
      const msToMinutes = Math.floor(msToTarget / (1000 * 60)) % 60;
      const msToSeconds = Math.floor(msToTarget / 1000) % 60;
      const countdownDisplay = document.getElementById('countdown');
      countdownDisplay.innerHTML = `${msToHours}:${msToMinutes}:${msToSeconds}`;
      if (msToTarget <= 0) {
        clearInterval(timeoutID);
      }
    }
    
    const timeoutID = setInterval(updateCountdown, 1000);</code>

    🎜🎜샘플 코드(setTimeout() 메서드)🎜🎜

    <code>function countdown(ms) {
      const targetTime = Date.now() + ms;
      const countdownDisplay = document.getElementById('countdown');
      const update = () => {
        const msRemaining = targetTime - Date.now();
        if (msRemaining <= 0) {
          return;
        }
        const msToHours = Math.floor(msRemaining / (1000 * 60 * 60));
        const msToMinutes = Math.floor(msRemaining / (1000 * 60)) % 60;
        const msToSeconds = Math.floor(msRemaining / 1000) % 60;
        countdownDisplay.innerHTML = `${msToHours}:${msToMinutes}:${msToSeconds}`;
        setTimeout(update, 1000);
      }
      update();
    }
    
    countdown(3600000);  // 1 小时</code>

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