Q&A
ソースコードはマークダウンのcode機能を使ってください。質問・解説内容とコードとの境目が不明瞭となりますし、code機能では正しくコードをコピペできるようになりインデントもつけられて読みやすくなり、再現確認も容易となりますので、的確な回答が得やすくなります。https://teratail.com/help#about-markdown
<概要>
カウントダウンタイマーを作ったのですが、ブラウザで数字の部位がNaNと表示され動きませんでした(htmlのデザインは反映)。打ち間違いや関数など再チェックを何度も試みましたが変わりませんでした。function countDown(){の中でconsole.log(timeLeft);を試みましたがconsoleでも何も表記されませんでした。
js
1(function(){ 2 'use strict';//エラーチチェック 3 4 var timer = document.getElementById('timer'); 5 var min = document.getElementById('min'); 6 var sec = document.getElementById('sec'); 7 var reset = document.getElementById('reset'); 8 var start = document.getElementById('start');//宣言した変数をいじるという宣言 9 10 var startTime; 11 var timeLeft; 12 var timeToCountDown=4*1000;//タイマーの最大 13 var elapsedTime=Date.now()-startTime; 14 15 function updateTimer(t){//残り時間を実際ブラウザに表示させる 16 var d =new Date(t); 17 var m =d.getMinutes(); 18 var s =d.getSeconds(); 19 var ms =d.getMilliseconds(); 20 timer.textContent=m+":"+s+"."+ms;//ブラウザに残り時間を表記 21 } 22 23 function countDown(){ 24 setTimeout(function(){ 25 timeLeft=timeToCountDown-elapsedTime; 26 updateTimer(timeLeft); 27 countDown();//関数の実行 28 },10);//タイマー処理、１０ミリ秒後 29 30 } 31 start.addEventListener('click',function(){//イベントを設定 32 startTime=Date.now();//クリックするとその時の時間がDate.now()になる 33 countDown();//関数の実行 34 }); 35})();
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>Timer</title> 6 <link rel="stylesheet" href="css/style.css"> 7</head> 8<body> 9 <div id="timer">00:00.000</div> 10 <div class="controls"> 11 <button id="min">Min</button> 12 <button id="sec">Sec</button> 13 <button id="reset">Reset</button> 14 <button id="start">Start</button> 15 </div> 16 <script src="js/main.js"></script> 17</body> 18</html>
またJavaScriptだけでなくhtmlもご提示ください。
あとブラウザのデベロッパーツールのコンソールにエラーがでていないか確認してください。コードだけ見ても原因究明にならないことが多いので、console.log()を活用し、処理がどこまで想定通りに通っているのかデバッグを行ってください。
直ちに修正して質問させていただきます。ご指摘ありがとうございました。後console.log(timeLeft);で残り時間を確認しようとしたのですが、何も表記されませんでした。
回答2件
0
elapsedTimeの値が上手く設定、更新できていないのが問題だと思います。
JavaScript
1(function () 2{ 3 'use strict';//エラーチチェック 4 5 var timer = document.getElementById('timer'); 6 var min = document.getElementById('min'); 7 var sec = document.getElementById('sec'); 8 var reset = document.getElementById('reset'); 9 var start = document.getElementById('start');//宣言した変数をいじるという宣言 10 11 /* こちらの動作も確認しておくと良いかもしれません。 12 var startTime; 13 console.log(0 - null); 14 console.log(0 - undefined); 15 console.log(startTime, null, undefined); 16 */ 17 18 var startTime = Date.now(); 19 var timeLeft; 20 var timeToCountDown = 4 * 1000;//タイマーの最大 21 //var elapsedTime = Date.now() - startTime; 22 23 function updateTimer(t) 24 {//残り時間を実際ブラウザに表示させる 25 var d = new Date(t); 26 var m = d.getMinutes(); 27 var s = d.getSeconds(); 28 var ms = d.getMilliseconds(); 29 30 timer.textContent = m + ":" + s + "." + ms;//ブラウザに残り時間を表記 31 } 32 33 function countDown() 34 { 35 setTimeout(function () 36 { 37 //更新 38 var elapsedTime = Date.now() - startTime; 39 timeLeft = timeToCountDown - elapsedTime; 40 updateTimer(timeLeft); 41 countDown();//関数の実行 42 }, 10);//タイマー処理、１０ミリ秒後 43 44 } 45 start.addEventListener('click', function () 46 {//イベントを設定 47 startTime = Date.now();//クリックするとその時の時間がDate.now()になる 48 countDown();//関数の実行 49 }); 50})();
投稿2018/11/23 07:34
総合スコア55
0
ベストアンサー
ヒントのみの回答です。
js
1var startTime; 2///中略 3var elapsedTime=Date.now()-startTime;
初期時点ではstartTimeは定義されただけで何も入っていませんので、正しく引き算ができてません。
それによりtimeLeftの計算も正しく行われません。
そのためconsole.log()で出力してもNaNとなります。
投稿2018/11/23 07:37
総合スコア80850
あなたの回答
tips
プレビュー
