前提・実現したいこと
javascriptで書いたものをjQueryで記述したいです。
javascriptで、カウントダウンタイマーを作りました。それをjQueryで書きたいのですが、
startを押しても動作してくれません。
js
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<title>カウントダウン</title> 6 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 7<script> 8 var interval_id; 9 var time = 180; 10 11 function count_start(){ 12 document.getElementById('start').disabled = true; 13 interval_id = setInterval(count_down , 1000); 14 } 15 16 function count_down(){ 17 var display = document.getElementById('display'); 18 var min = document.getElementById('min'); //分 19 var sec = document.getElementById('sec'); //秒 20 if (time === 1 ){ 21 display.innerHTML = 'TIME UP!'; 22 document.getElementById('display').style.color = "red"; 23 }else{ 24 time--; 25 var next_min = Math.floor(time / 60); 26 var next_sec = Math.floor(time % 60); 27 28 next_min = zero_padding(next_min); 29 next_sec = zero_padding(next_sec); 30 min.innerHTML = next_min; 31 sec.innerHTML = next_sec; 32 } 33 }; 34 35 function zero_padding(num){ 36 return ('00' + num).slice(-2); 37 }; 38 39 function count_stop(){ 40 clearInterval(interval_id); 41 document.getElementById('start').disabled = false; 42 }; 43 44 function count_reset(){ 45 count_stop(); 46 document.getElementById('min').innerHTML = '03'; 47 document.getElementById('sec').innerHTML = '00'; 48 document.getElementById('start').disabled = false; 49 }; 50 51 window.onload = function(){ 52 var start = document.getElementById('start'); 53 start.addEventListener('click' , count_start , false); 54 var stop = document.getElementById('stop'); 55 stop.addEventListener('click', count_stop , false); 56 var reset = document.getElementById('reset'); 57 reset.addEventListener('click', count_reset , false); 58 }; 59</script> 60 </head> 61<body> 62 <div id ="timer"> 63 <div id ="box"> 64 <p id ="display"><span id="min">03</span>:<span id="sec">00</span></p> 65 <div id="button"> 66 <button id ="start">スタート</button> 67 <button id ="stop">ストップ</button> 68 <button id ="reset">リセット</button> 69 </div> 70 </div> 71 </div> 72</body> 73</html>
該当のソースコード
自分なりに書いてみたのですが、、、動作しないので間違っているんだと思います。
jQuery
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<title>カウントダウン</title> 6<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 7<script> 8 var interval_id; 9 var time = 180; 10 11 function count_start(){ 12 $('#start').prop('disabled', 'true'); 13 interval_id = setInterval(count_down , 1000); 14 } 15 16 $(function(){ 17 $('#start').click(function(){ 18 $('start').prop('disabled', true); 19 interval_id = setInterval(count_down, 1000); 20 }); 21 }); 22 23 function count_down(){ 24 var display = $('#display').get(0); 25 var min = $('#min').get(0); 26 var sec = $('#sec').get(0); 27 if (time === 1 ){ 28 $('#display').text('TIME UP!').css('color', 'red'); 29 }else{ 30 time--; 31 var next_min = Math.floor(time / 60); 32 var next_sec = Math.floor(time % 60); 33 34 next_min = zero_padding(next_min); 35 next_sec = zero_padding(next_sec); 36 min.innerHTML = next_min; 37 sec.innerHTML = next_sec; 38 } 39 }; 40 41 function zero_padding(num){ 42 return ('00' + num).slice(-2); 43 }; 44 45 function count_stop(){ 46 clearInterval(interval_id); 47 $('#start').prop('disabled', 'false'); 48 }; 49 50function count_reset(){ 51 count_stop(); 52 $('#min').html('03'); 53 $('#sec').html('00'); 54 $('#start').prop('disabled', 'false'); 55 }; 56 57 $(function(){ 58 var start = $('#start').get(0); 59 $('#start').on('click', count_start, flase); 60 61 var stop = $('#stop').get(0); 62 $('#stop').on('click', count_start, flase); 63 64 var reset = $('#start').get(0); 65 $('#reset').on('click', count_start, flase); 66 }); 67 68</script> 69 </head> 70<body> 71 <div id ="timer"> 72 <div id ="box"> 73 <p id ="display"><span id="min">03</span>:<span id="sec">00</span></p> 74 <div id="button"> 75 <button id ="start">スタート</button> 76 <button id ="stop">ストップ</button> 77 <button id ="reset">リセット</button> 78 </div> 79 </div> 80 </div> 81</body> 82</html> 83
どのように書けばいいかアドバイスいただけますでしょうか。
回答3件
あなたの回答
tips
プレビュー