JavaScript 스톱워치
Harshit Jindal
2023년10월12일
스톱워치는 활성화와 비활성화 사이의 시간을 측정하는 데 사용됩니다. 특정 활동에 소요되는 시간을 측정하는 데 도움이됩니다. 시간 간격 관련 구현에 도움이되는 JavaScript 타이밍 메서드setTimeout()및clearTimeout()을 사용하여 스톱워치를 빌드합니다. 스톱워치는 디스플레이와 세 개의 버튼이 있습니다. 디스플레이에는 시간과 스톱워치를 시작, 중지 및 재설정하는 세 개의 버튼이 표시됩니다. 이 튜토리얼에서는 JavaScript로 스톱워치를 만드는 방법을 설명합니다.
JavaScript 스톱워치
HTML 코드
<h1><time>00:00:00</time></h1>
<button id="strt">start</button>
<button id="stp">stop</button>
<button id="rst">reset</button>
위의 코드에서 HTML을 사용하여 스톱워치 시간을 표시하고start,stop및reset세 개의 필수 버튼을 만듭니다.
JavaScript 코드
var h1 = document.getElementsByTagName('h1')[0];
var start = document.getElementById('strt');
var stop = document.getElementById('stp');
var reset = document.getElementById('rst');
var sec = 0;
var min = 0;
var hrs = 0;
var t;
function tick() {
sec++;
if (sec >= 60) {
sec = 0;
min++;
if (min >= 60) {
min = 0;
hrs++;
}
}
}
function add() {
tick();
h1.textContent = (hrs > 9 ? hrs : '0' + hrs) + ':' +
(min > 9 ? min : '0' + min) + ':' + (sec > 9 ? sec : '0' + sec);
timer();
}
function timer() {
t = setTimeout(add, 1000);
}
timer();
start.onclick = timer;
stop.onclick = function() {
clearTimeout(t);
} reset.onclick = function() {
h1.textContent = '00:00:00';
seconds = 0;
minutes = 0;
hours = 0;
}
-
먼저 선택기를 사용하여 모든 HTML 요소를 선택하여 JavaScript로 조작하고
3변수hrs,min및sec를 초기화하여 현재 시간을 저장합니다. 또한t변수를 선언하여setTimeout()을 저장하고clearTimeout()을 호출하여 지 웁니다. -
start버튼에 타이머 기능을 추가했습니다.start버튼을 클릭 할 때마다timer()함수가 호출되어1초 간격으로 add 함수를 호출합니다.add()함수는tick()함수를 호출하여 초를1씩 증가시키고 이에 따라 분과 시간을 조정합니다. 새 시간을 표시하도록 디스플레이의 내용을 재설정 한 다음timer()함수를 다시 호출하여 자체를 호출합니다. -
주기적으로 추가 함수 호출을 중지하기 위해
stop버튼에clearTimeout()을 첨부했습니다. -
시간을
00:00:00으로 재설정하고sec,min및hrs를0으로 재설정하여reset버튼으로 재설정하는 기능을 추가했습니다.
작가: Harshit Jindal
Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.
LinkedIn