実現したいこと
jQueryを使って3分タイマーを制作したいです。
必須項目としては以下となります。
1.カウントは03:00からスタートする
2.スタートボタンを押すと1秒ずつカウントが進む
3.カウントが00:00になったら「Time UP!」と表示する
4.ストップボタンを押すとカウントが止まる
5.リセットボタンを押すとカウントが03:00に戻り、カウントが止まる
発生している問題・エラーメッセージ
既にJavaScriptで制作したものがあり、それをベースにjQueryで制作するのですが、
スタートやストップ、リセットを押しても、何も反応がありません。
該当のソースコード
【ベースとなるJavaScriptのコード】
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>タイマー制作</title> <link rel="stylesheet" href="timer.css"> <script> window.onload = function(){ var time = 180; var interval; var min = document.getElementById('min'); var sec = document.getElementById('sec'); var start = document.getElementById('start'); var stop = document.getElementById('stop'); var reset = document.getElementById('reset'); //start start.onclick = function() { toggle(); interval = setInterval(count, 1000); } //stop stop.onclick = function(){ toggle(); clearInterval(interval); } //reset reset.onclick = function() { time = 180; sec.innerHTML = time % 60; min.innerHTML = Math.floor( time / 60 ); clearInterval(interval) if(start.toggle){ toggle(); } } //中身1 function toggle(){ if(start.disabled){ start.disabled = false; stop.disabled = true; } else { start.disabled = true; stop.disabled = false; } } //中身2 function count(){ if(time === 0){ min.innerHTML = 0; sec.innerHTML = 0; toggle(); alert("Time UP!"); clearInterval(interval); } else { time -= 1; sec.innerHTML = time % 60; min.innerHTML = Math.floor( time / 60 ); } } } </script> </head> <body> <div id="timer"> <p> <span id="min">3</span> m <span id="sec">0</span> s </p> <p> <button id="start">start</button> <button id="stop">stop</button> <button id="reset">reset</button> </p> </div> </body> </html>
【現在作成中のjQuery】
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>「jQuery」タイマー制作</title> <link rel="stylesheet" href="timer_jquery.css"> <script src="jquery-3.3.1.min.js"></script> <script> $(function(){ var time = 180; var interval; //start $('#start').on('click',function start_event(){ toggle(); interval = setInterval(count, 1000) }); //stop $('#stop').on('click',function stop_event(){ toggle(); clearInterval(interval) }); //reset $('#reset').on('click',function reset_event(){ time=180; $('#sec').html(time & 60); $('#min').html(Math.floor(time/60)); clearInterval(interval) if(start.toggle){ toggle(); } }); //表示 function toggle(){ if(start_event.disabled){ start_event.disabled = false; stop_event.disabled = true; } else { start_event.disabled = true; stop_event.disabled = false; } } //中身 function count(){ if(time === 0){ $('#min').html(0); $('#sec').html(0); toggle(); alert("Time Up!"); clearInterval(interval) } else { time -= 1; $('#min').html(Math.floor(time/60)); $('#sec').html(time % 60); } } }); </script> </head> <body> <div id="timer"> <p> <span id="min">3</span> m <span id="sec">0</span> s </p> <p> <button id="start">start</button> <button id="stop">stop</button> <button id="reset">reset</button> </p> </div> </body> </html>
試したこと
JSに記載のある「innerHTML」をどう表現したらいいか分からず、$('#').html();と表記していますが、
これで合っているのでしょうか?
ご回答、お待ちしております。
回答2件
あなたの回答
tips
プレビュー