Javascriptでカウントダウンタイマーを作ったよ！

基本形が出来たので、お酒の酔いに任せて公開。
ぶっちゃけ、プログラム入門の人が作るレベルと同じです。多分無駄が多いはず。
でも公開します＞＜

構想

ラーメンタイマーはもちろん。時間から秒までカウントできるものを作る。
時間を扱うときは、すべて秒単位にしてから処理、あとで計算して時間、分、秒　として直す。
スタート、ストップは同じボタン。
リセットは別にする。
ラーメンタイマーや、ほかのボタンを作りやすくするために、時間設定は関数で何とかする。

こんなところです。では、内容を公開。

タイマーを作ったよ！

使い方

フォームは、それぞれ、時間、分、秒　です。
start/stopでスタートします。
時間が経過している間に、一度start/stopを押すとストップし、もう一度押すとフォームの内容からスタートします。
resetで00:00:00になります。
3minで三分タイマーになります。

コードは以下から

js_timer.js

var preset_tmp_sec = 0;	//初期入力をリセット
var timer_flag = 0;
var timer_set ;

function timer_startandstop() {

timer_flag = timer_flag + 1;

switch(timer_flag) {
	case 1:	//ここで時間をスタートさせる。
		timer_forminput_set();	//入力したタイマーをセットする。
		timer_set = setInterval("timer_tick()" , 1000);

		break;
	case 2:	//もし、一度押されてたら、二度目以降はリセット
		clearInterval(timer_set);alert("ストップしました。");
		timer_flag = 0;
		break;
	default:
		clearInterval(timer_set);
		document.form1.form_hour.value = "00";
		document.form1.form_min.value = "00";
		document.form1.form_sec.value = "00";
		break;
	}
}

function timer_tick() {	//タイマールーチン

preset_tmp_sec = preset_tmp_sec - 1;

//秒単位の秒数をそれぞれの単位に直す
sec = preset_tmp_sec %60;
min = Math.floor(preset_tmp_sec /60) % 60;
hour = Math.floor(preset_tmp_sec / 3600) % 24;

//"00"と表示させるための処理
if(hour<10){hour = "0" + hour;}
if(min<10){min = "0" + min;}
if(sec<10){sec = "0" + sec;}

document.form1.form_hour.value = hour;
document.form1.form_min.value = min;
document.form1.form_sec.value = sec;

if (preset_tmp_sec <= 0) {
	document.form1.form_hour.value = "00";
	document.form1.form_min.value = "00";
	document.form1.form_sec.value = "00";

	clearInterval(timer_set);

	alert("時間ですよ！");
	}
}

function timer_forminput_set() {

//初期化
var hour_f = 0;
var min_f = 0;
var sec_f = 0;

hour_f = eval(document.form1.form_hour.value);
min_f = eval(document.form1.form_min.value);
sec_f = eval(document.form1.form_sec.value);

//それぞれを秒に変換
h1 = hour_f * 60 * 60;
m1 = min_f * 60;
s1 = sec_f;

//それぞれを足して秒単位で出力
preset_tmp_sec = h1 + m1 + s1 ;
//alert(preset_tmp_sec);
}

function timer_bottoninput_set(hour_b , min_b , sec_b) {
//タイマーが動いてたときの処理
clearInterval(timer_set);

//"00"と表示させるための処理
if(hour_b<10){hour_b = "0" + hour_b;}
if(min_b<10){min_b = "0" + min_b;}
if(sec_b<10){sec_b = "0" + sec_b;}

document.form1.form_hour.value = hour_b;
document.form1.form_min.value = min_b;
document.form1.form_sec.value = sec_b;

return false
}

js_timer.html

<html>
<head>
<title>タイマー	を作ったよ！</title>
<script language="JavaScript" src="js_timer.js">
</head>
<body>

<form name="form1">
<input name="form_hour" value="00" size=2>:
<input name="form_min" value="00" size=2>:
<input name="form_sec" value="00" size=2>
<br>
<input type="button" value="3min" onClick="timer_bottoninput_set(0,3,0)">
<br>
<input type="button" value="start/stop" onClick="timer_startandstop()">
<input type="button" value="reset" onClick="timer_bottoninput_set(0,0,0)">
</form>

</body>
</html>

追記(2008/03/17 12:08)

フォームのname属性を変更しました

セキュリティや例外処理は全然考えてません。
フォームのボックスにJavascriptの文を入れたら実行できたし
これが世に言うクロスサイトスクリプティングですね。＞＜；
例外処理ってどうすればいいんだろうなぁ。簡単なのは、数字以外は全部はじくといった作業かもしれないけど。

追記(2008/03/29 22:00)

近日中に、バージョンアップします。新規エントリーとして出します。
→バージョンアップしてないです。ごめんなさい。気が向いたら手直しする予定にします。