ストップウォッチを複数作る方法が分かりません。
一つだけならできたのですが、独立したストップウォッチを複数作るとなると、
不具合が起きてしまいます。
独立した複数のストップウォッチの作り方を教えてください。
よろしくお願いします。
(以下は単体のストップウォッチのコードです)
lang
1<h1>ストップウォッチ</h1> 2 <div id="sec" style="font-size:128px">0.00</div> 3 <input type="button" value="start!" id="run"> 4 <input type="button" value="stop!" id="stop"> 5 <input type="button" value="reset!" id="reset">
lang
1<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 2<script> 3 4$(function(){ 5var startTime, 6 timerId, 7 running = false, 8 stopTime; 9 10$('#run').click(function(){ 11 run(); 12 clickRun(); 13}); 14 15$('#stop').click(function(){ 16 stop(); 17 clickstop(); 18}); 19 20$('#reset').click(function(){ 21 reset(); 22 clickReset(); 23}); 24 25function run(){ 26 27 if(running) return; 28 29 running = true; 30 31 if (stopTime){ 32 startTime = startTime + (new Date()).getTime() - stopTime; 33 } 34 35 if(!startTime){ 36 startTime = (new Date()).getTime(); 37 } 38 timer(); 39} 40 41function timer(){ 42 document.getElementById('sec').innerHTML = (((new Date()).getTime() - startTime) / 1000).toFixed(2); 43 timerId = setTimeout(function(){ 44 timer(); 45 },100); 46} 47 48function stop(){ 49 if(!running) return false; 50 running = false; 51 clearTimeout(timerId); 52 stopTime = (new Date()).getTime(); 53} 54 55function reset(){ 56 if(running) return; 57 startTime = undefined; 58 document.getElementById('sec').innerHTML = '0.00'; 59} 60 61function clickRun(){ 62 $('#run').css('display','none'); 63 $('#stop').show(); 64 $('#reset').show(); 65} 66function clickstop(){ 67 $('#run').show(); 68 $('#stop').css('display','none'); 69} 70function clickReset(){ 71 $('#run').show(); 72 $('#stop').css('display','none'); 73 $('#reset').css('display','none'); 74} 75}); 76</script>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/01/16 11:54
2015/01/20 04:03