7-2 QUIZストップウォッチの作成

5980 ワード

テスト:条件文と繰り返し文を使用して簡単な秒表を作成します.
#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>
JS
let 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を使って作りたいです.