[JS] ストップウォッチ
JavascriptでPCブラウザとスマートフォン(iPhone,Android)用ブラウザにも対応したストップウォッチを作ってみたいと思い、試しに作ってみました。(  ̄▽ ̄)ノ
スタートボタンで1ミリ秒単位でカウント開始、ストップボタンで一時停止。クリアボタンでカウントを0クリア。
スタートボタンで1ミリ秒単位でカウント開始、ストップボタンで一時停止。クリアボタンでカウントを0クリア。
ソースコードは、次の通り。
<html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> <title>ストップウォッチ</title> <script type="text/javascript"><!-- var bStart = false; var dateStart = new Date(); var timeCount = 0; var timerID = -1; var timeDispObj = null; var timerInterval = -1; function DoDisplayTime(ms) { var hour = parseInt(ms / 3600 / 1000); var min = parseInt((ms / 60 / 1000) % 60); var sec = parseInt((ms / 1000) % 60); var ms = parseInt(ms % 1000); if (hour < 10) {hour = "0" + hour;} if (min < 10) {min = "0" + min;} if (sec < 10) {sec = "0" + sec;} if (ms < 10) {ms = "0" + ms;} if (ms < 100) {ms = "0" + ms;} timeDispObj.value = hour + ":" + min + ":" + sec + "." + ms; } function DoTimeCount() { var nDateNow = new Date(); timeCount += parseInt(nDateNow.getTime() - dateStart.getTime()); dateStart = nDateNow; var hour = parseInt(timeCount / 3600 / 1000); var min = parseInt((timeCount / 60 / 1000) % 60); var sec = parseInt((timeCount / 1000) % 60); var ms = parseInt(timeCount % 1000); if (hour < 10) {hour = "0" + hour;} if (min < 10) {min = "0" + min;} if (sec < 10) {sec = "0" + sec;} if (ms < 10) {ms = "0" + ms;} if (ms < 100) {ms = "0" + ms;} timeDispObj.value = hour + ":" + min + ":" + sec + "." + ms; } function DoTime(btnObj, dispObj) { timeDispObj = dispObj; bStart = !bStart; btnObj.value = bStart ? "ストップ" : "スタート"; if (bStart) dateStart = new Date(); if (bStart) timerInterval = setInterval("DoTimeCount()", 1); else clearInterval(timerInterval); } function DoTimeClear(dispObj) { timeCount = 0; dateStart = new Date(); dispObj.value = "00:00:00.000"; } // --></script> </head> <body> <form action="#" name="dispform"> 経過時間 : <input type="text" name="watch" size="13" value="00:00:00.000" readonly></br> <input type="button" name="start_stop" value="スタート" onclick="DoTime(this, this.form.watch)"> <input type="button" name="clear" value="クリア" onclick="DoTimeClear(this.form.watch)")> </form> </body> </html> |
http://fjiblog.cocolog-nifty.com/html/fji_stopwatch.html
| 固定リンク
「HTML・CSS・JS関連」カテゴリの記事
- [Canvas]Windowサイズに合わせてCanvasをリサイズ(2016.08.01)
- [Web作成] 通知メッセージ(2016.05.04)
- [JS] ストップウォッチ(2013.08.26)
- [Web作成] アコーディオンメニュー(2012.07.04)
- [Web作成] メニューの展開と折りたたみ : すべて展開とすべて折りたたみ(2012.05.22)
コメント