자바스크립트로 타이머 만들기

[Clique aqui para ler em português]

JavaScript와 HTML만 사용하여 간단한 타이머를 만들어 보겠습니다.

암호

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

<form name="form_main">
  <div>
    <span id="hour">00</span>:<span id="minute">00</span>:<span id="second">00</span>:<span id="millisecond">000</span>
  </div>

  <br />

  <button type="button" name="start">start</button>
  <button type="button" name="pause">pause</button>
  <button type="button" name="reset">reset</button>
</form>

HTML 구조에서 시간 정보를 표시하기 위해 일부span가 생성되었으며 그 후에 타이머의 기능을 제어하는 ​​3개의 버튼이 있습니다.

이제 JavaScript 부분을 시작하겠습니다.

"use strict";

let hour = 0;
let minute = 0;
let second = 0;
let millisecond = 0;

let cron;

document.form_main.start.onclick = () => start();
document.form_main.pause.onclick = () => pause();
document.form_main.reset.onclick = () => reset();

이 JavaScript 코드에서 제어 변수를 정의하고 기능을 해당 버튼과 연결합니다.

이제 함수를 생성해 보겠습니다.

function start() {
  pause();
  cron = setInterval(() => { timer(); }, 10);
}

function pause() {
  clearInterval(cron);
}

function reset() {
  hour = 0;
  minute = 0;
  second = 0;
  millisecond = 0;
  document.getElementById('hour').innerText = '00';
  document.getElementById('minute').innerText = '00';
  document.getElementById('second').innerText = '00';
  document.getElementById('millisecond').innerText = '000';
}

여기에 start , pause 및 reset 함수가 있으며 start 함수에서는 10밀리초마다 setInterval를 시작합니다(브라우저에 따라 1밀리초마다 잠기기 때문).
pause 함수에서 setInterval 를 지우고 start 함수에서 백그라운드에서 여러 작업이 없도록 시작하기 전에 지워야하므로 절차를 시작하기 전에 pause 함수 라고 합니다.
reset 함수에서 보조 변수를 재설정하고 화면의 텍스트가 화면의 0(zero)로 돌아가도록 innerText 를 사용하여 수동으로 설정합니다.

function timer() {
  if ((millisecond += 10) == 1000) {
    millisecond = 0;
    second++;
  }
  if (second == 60) {
    second = 0;
    minute++;
  }
  if (minute == 60) {
    minute = 0;
    hour++;
  }
  document.getElementById('hour').innerText = returnData(hour);
  document.getElementById('minute').innerText = returnData(minute);
  document.getElementById('second').innerText = returnData(second);
  document.getElementById('millisecond').innerText = returnData(millisecond);
}

function returnData(input) {
  return input > 10 ? input : `0${input}`
}

여기에 timer 함수에서 호출되는 마지막 부분인 start 함수가 있습니다. 이 함수에서 경과 시간을 확인합니다.

10에 더한 millisecond가 1000과 같으면 1초가 지난 다음 밀리초를 재설정하고 1초씩 늘립니다.

second가 60과 같으면 1분이 지난 다음 초를 1분으로 재설정합니다.

minute가 60이면 1시간이 지난 다음 분을 재설정하고 1시간 늘립니다.

마지막으로 innerText 를 사용하여 화면에 인쇄합니다.
returnData 함수는 화면에서 텍스트를 보다 동적으로 만드는 데만 사용되며, 숫자가 10보다 작으면 앞에 0(zero)를 연결하여 다음 논리를 만듭니다.

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

데모

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

유튜브

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

읽어 주셔서 감사합니다!

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

😊😊 또 만나요! 😊😊