[Clique aqui para ler em português]

특정 날짜까지 남은 시간을 아주 간단하게 알아볼까요? 생일이나 휴가가 얼마나 남았는지 아래에서 이 프로젝트가 얼마나 빠른지 확인하세요.

암호

먼저 인터페이스를 만들고 HTML만 사용하여 간단한 작업을 수행합니다.

<h1>Contagem regressiva</h1>
<form name="form_main">
  <label for="numero">Data:</label> 
  <input name='date_end' type="date" onblur="resetCountdown()" />
  <br>
</form>
<div class="container">
  <h1>Contagem regressiva até a data selecionada:</h1>
  <ul>
    <li><span id="days"></span>days</li>
    <li><span id="hours"></span>Hours</li>
    <li><span id="minutes"></span>Minutes</li>
    <li><span id="seconds"></span>Seconds</li>
  </ul>
</div>

HTML 구조에서 날짜를 받기 위한 입력이 생성되었고, 입력을 빠져나오면 onblur가 활성화되어 resetCountdown() 함수를 호출한다.

const second = 1000;
const minute = second * 60;
const hour = minute * 60;
const day = hour * 24;

let count_down = new Date('03/03/2025 00:00:00').getTime();
let x = setInterval(() => countDown(), second);

function countDown() {
  let now = new Date(Date.now()).getTime();
  let diff = count_down - now;

  document.getElementById('days').innerText = Math.floor(diff / day);
  document.getElementById('hours').innerText = Math.floor(diff % day / hour);
  document.getElementById('minutes').innerText = Math.floor(diff % hour / minute);
  document.getElementById('seconds').innerText = Math.floor(diff % minute / second);
}

function resetCountdown() {
  clearInterval(x);
  let date_end = document.form_main.date_end.value;
  count_down = new Date(`${date_end} 00:00:00`).getTime();
  x = setInterval(() => countDown(), second);
}

여기에는 페이지를 로드할 때 시작되는 countdown() 함수가 있고 그 후에 날짜를 채우고 입력이 포커스를 잃는 즉시 활성화되는 resetCountdown() 함수가 있습니다.

그렇게 간단하게 준비했습니다.

데모

아래에서 작업하는 전체 프로젝트를 참조하세요.

유튜브

시청을 선호하는 경우 youtube(PT-BR의 비디오)에서 개발 내용을 확인합니다.

읽어 주셔서 감사합니다!

질문, 불만 사항 또는 팁이 있는 경우 여기에 의견을 남길 수 있습니다. 기꺼이 답변해 드리겠습니다!

😊😊 또 만나요! 😊😊