« [facebook] マイ・レジェンド : 鬥者大陸「嘆息之崖」クリア | トップページ | [facebook] マイ・レジェンド : 鬥者大陸「秘法森林」クリア »

2013年8月26日 (月)

[JS] ストップウォッチ

JavascriptでPCブラウザとスマートフォン(iPhone,Android)用ブラウザにも対応したストップウォッチを作ってみたいと思い、試しに作ってみました。(  ̄▽ ̄)ノ

経過時間 :
 

スタートボタンで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>

上記と同じコードのhtmlファイルは次のURL先となります。
http://fjiblog.cocolog-nifty.com/html/fji_stopwatch.html

|

« [facebook] マイ・レジェンド : 鬥者大陸「嘆息之崖」クリア | トップページ | [facebook] マイ・レジェンド : 鬥者大陸「秘法森林」クリア »

HTML・CSS・JS関連」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック


この記事へのトラックバック一覧です: [JS] ストップウォッチ:

« [facebook] マイ・レジェンド : 鬥者大陸「嘆息之崖」クリア | トップページ | [facebook] マイ・レジェンド : 鬥者大陸「秘法森林」クリア »