자바 스크립트에서 간단한 카운트 업 타이머 만들기. 시작 버튼을 클릭하면 버튼을 클릭 한 시점과 타이머가 시작되는 시점 사이에 지연이 있습니다. 누군가 이것이 이유를 설명해 주시겠습니까? 저는 JavaScript 초보자이므로 명확하고 이해하기 쉬운 설명이 정말 감사하겠습니다.
미리 감사드립니다
var startButton = document.getElementById("start");
var pauseButton = document.getElementById("pause");
var resetButton = document.getElementById("reset");
var minutesHTML = document.getElementById("minutes");
var secondsHTML = document.getElementById("seconds");
var seconds = 00;
var minutes = 00;
var myTimer = false;
startButton.onclick = startTimer;
pauseButton.onclick = pauseTimer;
resetButton.onclick = resetTimer;
function startTimer () {
myTimer = setInterval (function () {
if (seconds < 10) {
secondsHTML.innerHTML = "0" + seconds;
}
if (seconds > 9) {
secondsHTML.innerHTML = seconds;
}
seconds ++;
if (seconds % 60 == 0) {
minutes ++;
seconds = 00;
}
if (minutes < 10) {
minutesHTML.innerHTML = "0" + minutes;
}
if (minutes >= 10) {
minutesHTML.innerHTML = minutes;
}
}
, 1000)
}
function pauseTimer () {
clearInterval(myTimer);
}
function resetTimer () {
seconds = 00;
minutes = 00;
secondsHTML.innerHTML = seconds;
minutesHTML.innerHTML = minutes;
console.log(secondsHTML + minutesHTML);
clearInterval(myTimer);
}body{
background: tomato;
text-align: center;
margin: auto;
font-size: 50px;
}
h1 {
font-size: 20px;
}
.button-container {
display: flex;
margin: auto;
}
button {
text-align: center;
border: none;
width: 20%;
background: #fff;
font-size: 20px;
margin: auto;
}<h1>TIMER</h1>
<p>
<span id="minutes">00</span>
:
<span id="seconds">00</span>
</p>
<div class="button-container">
<button id="start"><p>START</p></button>
<button id = "pause"><p>PAUSE</p></button>
<button id = "reset"><p>RESET</p></button>
</div>setInterval 처음으로 함수를 실행하기 전에 간격 (코드에서 1000ms)이 경과 할 때까지 기다립니다.
을 호출하기 직전에 직접 함수를 호출 할 수 있습니다 setInterval. 이렇게하면 즉시 한 번의 호출을받은 다음 간격이 취소 될 때까지 매초마다 한 번씩 호출됩니다.
function tick () {
if (seconds < 10) {
secondsHTML.innerHTML = "0" + seconds;
}
if (seconds > 9) {
secondsHTML.innerHTML = seconds;
}
seconds ++;
if (seconds % 60 == 0) {
minutes ++;
seconds = 00;
}
if (minutes < 10) {
minutesHTML.innerHTML = "0" + minutes;
}
if (minutes >= 10) {
minutesHTML.innerHTML = minutes;
}
}
function startTimer () {
tick();
myTimer = setInterval(tick, 1000);
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다