const timeCount = document.querySelector(".timeCount"); const startBtn = document.querySelector(".start"); const stopBtn = document.querySelector(".stop"); const resetBtn = document.querySelector(".reset"); //クリックされた時の時間(マイクロ秒) var startTime; //経過時刻(マイクロ秒)この値が秒、分として表示される var elapsedTime = 0; // setinterval を止めるための変数。clearTimeoutの引数へ var timerId; //過去の経過時間を記録するための変数。 var timeToadd = 0; function updateTimeText() { //1分は60000マイクロ秒。60000で割ることにより、分が計算される。 var m = Math.floor(elapsedTime / 60000); //1分は60000マイクロ秒。60000ミリ秒で割り、その余りを1000で割れば秒が計算される。 var s = Math.floor((elapsedTime % 60000) / 1000); //1秒は1000マイクロ秒。 1000ミリ秒で割った数の余りがマイクロ秒 var ms = elapsedTime % 1000; m = ("0" + m).slice(-2);//文字列の末尾2桁を表示 s = ("0" + s).slice(-2);//文字列の末尾2桁を表示 ms = ("00" + ms).slice(-3);//文字列の末尾3桁を表示 //HTMLのid="timer"部分に表示させる timeCount.textContent = m + ":" + s + ":" + ms; } //何度も使うための関数 function countUp() { // clearIntervalでストップさせるための変数 timerId = setTimeout(function () { //経過時刻はストップした時刻からスタートした時刻を引く //2回目以降はtimeToaddが追加される elapsedTime = Date.now() - startTime + timeToadd; updateTimeText(); //countUp関数自身を呼びだし10ミリ秒毎に計算をする countUp(); //10ミリ秒ごとに計算が繰り返される }, 10); } function startTimer() { startTime = Date.now(); countUp(); //スタートボタンを押せなくする startBtn.setAttribute("disabled", true); //ストップボタンとリセットボタンを押せるようにする stopBtn.removeAttribute("disabled"); resetBtn.removeAttribute("disabled"); } function stopTimer() { //タイマーをストップさせる clearInterval(timerId); //過去の経過時間。2回目以降この値が加算される。 timeToadd += Date.now() - startTime; //ストップボタンを押せないようにする stopBtn.setAttribute("disabled", true); //スタートボタンを押せるようにする startBtn.removeAttribute("disabled"); } function resetTimer() { //タイマーをストップさせる clearInterval(timerId); //経過時刻を0に elapsedTime = 0; //過去の経過時刻を0に timeToadd = 0; //表示を0にする updateTimeText(); //スタートボタンを押せるようにする startBtn.removeAttribute("disabled"); //ストップボタンとリセットボタンを押せないようにする stopBtn.setAttribute("disabled", true); resetBtn.setAttribute("disabled", true); } const nav = document.querySelector(".nav"); document.addEventListener("click", (e) => { if(e.target.closest(".btn")) { nav.classList.contains("active") ? nav.classList.remove("active") : nav.classList.add("active"); } else { nav.classList.remove("active"); } });