$(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'); 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); }); $('#rap').click(function() { $('#aho').append($("#clock").text()+" "+$("#mudai").val()+"<br>"); }); /** * カウントアップ */ 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); } });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <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> <input type="button" id="rap" value="rap"><input type="text" size="10" value="無題" id="mudai"> <script src="https://code.jquery.com/jquery-2.0.3.js"></script> </form> <div id="aho"></div> </body> </html>