[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)
コメント