7-2 QUIZストップウォッチの作成
5980 ワード
テスト:条件文と繰り返し文を使用して簡単な秒表を作成します.
#7-1. 複文と条件文で学んだ内容に基づいて簡単な秒表を作成します.
HTML
setIntervalを使って作りたいです.
#7-1. 複文と条件文で学んだ内容に基づいて簡単な秒表を作成します.
HTML
<div>
<div class="time">
<span class="minutes">00</span>:
<span class="seconds">00</span>:
<span class="tenMillis">00</span>
</div>
<div class="btn">
<button onclick="start()">시작</button>
<button onclick="stop()">멈춤</button>
<button onclick="reset()">초기화</button>
</div>
</div>
JSlet tenMillis = 0;
let seconds = 0;
let minutes = 0;
let Intervar;
const tenMillisDisplay = document.querySelector('.tenMillis');
const secondsDisplay = document.querySelector('.seconds');
const minutesDisplay = document.querySelector('.minutes');
function start(){
clearInterval(Intervar);
Intervar = setInterval(Timer,10);
}
function stop(){
clearInterval(Intervar);
}
function reset(){
clearInterval(Intervar);
tenMillis = 0;
seconds = 0;
minutes = 0;
tenMillisDisplay.innerText = '00';
tenMillisDisplay.innerText = '00';
secondsDisplay.innerText = '00';
}
function Timer(){
tenMillis++;
tenMillisDisplay.innerText = tenMillis > 9 ?tenMillis :'0'+ tenMillis;
if( tenMillis > 99 ){
seconds++;
secondsDisplay.innerText = seconds > 9 ?seconds :'0'+ seconds;
tenMillis = 0;
tenMillisDisplay.innerText = '00';
}
if( seconds > 59 ){
minutes++;
minutesDisplay.innerText = minutes > 9 ?minutes :'0'+ minutes;
seconds = 0;
secondsDisplay.innerText = '00';
}
}
コード作成者のテストではsettimeoutとclearIntervalの作成が必要です.setIntervalを使って作りたいです.
Reference
この問題について(7-2 QUIZストップウォッチの作成), 我々は、より多くの情報をここで見つけました https://velog.io/@jinhengxi/7-2-QUIZ-스톱워치-만들기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol