前提・実現したいこと
ドットインストールで作ったカウントダウンタイマーに、90分のボタンを追加したい。
発生している問題・エラーメッセージ
もともと分単位しか設定できないタイマーに90分のボタンを追加しようとしたら、初期状態では 00:00:00:000 と表示されているものが何かしらのボタンを押すと 09:00:00:000 になってしまいリセットしてもそのままになってしまいます 一応90分のボタンや分のボタンは反応しています。エラーが起こっている訳ではありません。
該当のソースコード
ソースコード (function() { 'use strict'; var timer = document.getElementById('timer'); var hou = document.getElementById('hou') var min = document.getElementById('min'); var sec = document.getElementById('sec'); var reset = document.getElementById('reset'); var start = document.getElementById('start'); var startTime; var timeLeft; var timeToCountDown = 0; var timerId; var isRunning = false; function updateTimer(t) { var d = new Date(t); var h = d.getHours(); var m = d.getMinutes(); var s = d.getSeconds(); var ms = d.getMilliseconds(); h = ('0' + h).slice(-2); m = ('0' + m).slice(-2); s = ('0' + s).slice(-2); ms = ('00' + ms).slice(-3); var timerString = `${h}:${m}:${s}.${ms}`; timer.textContent = timerString; document.title = timerString; } function countDown() { timerId = setTimeout(function() { timeLeft = timeToCountDown - (Date.now() - startTime); if (timeLeft < 0) { isRunning = false; start.textContent = 'start'; clearTimeout(timerId); timeLeft = 0; timeToCountDown = 0; updateTimer(timeLeft); return; } updateTimer(timeLeft); countDown(); }, 10); } // スタートボタン start.addEventListener('click',function() { if (isRunning === false) { isRunning = true; start.textContent = 'stop'; startTime =Date.now(); countDown(); } else { isRunning = false; start.textContent = 'start'; timeToCountDown = timeLeft; clearTimeout(timerId); } }); // 時間単位のボタン hou.addEventListener('click',function() { if (isRunning === true) { return; } timeToCountDown += 5400000; updateTimer(timeToCountDown); }); // 分単位のボタン min.addEventListener('click',function() { if (isRunning === true) { return; } timeToCountDown += 60 * 1000; if (timeToCountDown >= 60 * 60 * 1000) { timeToCountDown = 0; } updateTimer(timeToCountDown); }); // 秒単位のボタン sec.addEventListener('click',function() { if (isRunning === true) { return; } timeToCountDown += 1000; if (timeToCountDown >= 60 * 60 * 1000) { timeToCountDown = 0; } updateTimer(timeToCountDown); }); // リセットボタン reset.addEventListener('click',function() { timeToCountDown = 0; updateTimer(timeToCountDown); }); })(); //html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>timer</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <div class="container"> <!--初期状態のHTML表示--> <div id="timer">00:00:000</div> <div class="controls"> <div id="hou">90min</div> <div id="min">min</div> <div id="sec">sec</div> <div id="reset">reset</div> <div id="start">start</div> </div> <script src="main.js"></script> </div> </body> </html>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。