jQueryでストップウォッチタイマー

ストップウォッチタイマー

jQueryでカウントアップをストップウォッチに改修。

jQuery

$(function () { var sec = 0; var min = 0; var hour = 0; var timer; // スタート $('#start').click(function() { // 00:00:00から開始 sec = 0; min = 0; hour = 0; $('#clock').html('00:00:00'); timer = setInterval(countup, 1000); $(this).prop('disabled', true); $('#stop,#reset').prop('disabled', false); }); // ストップ $('#stop').click(function() { // 一時停止 clearInterval(timer); $(this).prop('disabled', true); $('#restart').prop('disabled', false); }); // リスタート $('#restart').click(function() { // 一時停止から再開 timer = setInterval(countup, 1000); $(this).prop('disabled', true); $('#stop').prop('disabled', false); }); // リセット $('#reset').click(function() { // 初期状態 sec = 0; min = 0; hour = 0; $('#clock').html('00:00:00'); clearInterval(timer); $('#stop,#restart,#reset').prop('disabled', true); $('#start').prop('disabled', false); }); /** * カウントアップ */ function countup() { sec += 1; if (sec > 59) { sec = 0; min += 1; } if (min > 59) { min = 0; hour += 1; } // 0埋め sec_number = ('0' + sec).slice(-2); min_number = ('0' + min).slice(-2); hour_number = ('0' + hour).slice(-2); $('#clock').html(hour_number + ':' + min_number + ':' + sec_number); } });

HTML

<div id="clock">00:00:00</div> <form> <input type="button" id="start" value="Start"> <input type="button" id="stop" value="Stop" disabled> <input type="button" id="restart" value="Restart" disabled> <input type="button" id="reset" value="Reset" disabled> </form>

サンプル

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。主にLAPP環境でPHPを書いています。最近はjQueryで遊んでいます。
※動作確認について