カウントダウンタイマーをアップデート

Javascriptでカウントダウンタイマーを作ったよ！ - MATTARI　DIARY の続き

前回から、フォーム内データのチェック、アップダウンボタンなど、機能追加をしてみました。
また、ボタンもデザインしています。アップダウンボタンを実装するときに、ついでに変えてみたというところです。
とりあえず、カウントダウンタイマーとしては一つの区切りにしようと思っています。次はガジェットに導入して、広く使えるようなものにしてみようかと。

タイマー を作ったよ！

js_timer.js

var preset_tmp_sec = 0;	//初期入力をリセット
var timer_startandstop_flag = 0;	//start/stopの判別フラグ
var timer_set;	//setInterval("timer_tick()" , 1000);
var timer_forminput_check_flag = 0; //フォームエラーのチェックフラグ

//スタートボタンとストップボタン
//
function timer_startandstop() {

timer_forminput_limit("document.getElementsByName('form_hour').item(0).value" , "4");
timer_forminput_limit("document.getElementsByName('form_min').item(0).value" , "2");
timer_forminput_limit("document.getElementsByName('form_sec').item(0).value" , "1");

timer_startandstop_flag += 1;

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

		} else {
			clearInterval(timer_set);
			timer_startandstop_flag = 0;
			timer_forminput_check_flag = 0;
		}
		break;

	case 7:
		alert("エラー すべてのフォームの内容が正しくありません。0-60までで入力してください");
			timer_startandstop_flag = 0;
			timer_forminput_check_flag = 0;
		break;
		
	case 4:
		alert("エラー \"時間\"が正しくありません。0-60までで入力してください");
			timer_startandstop_flag = 0;
			timer_forminput_check_flag = 0;
		break;
		
	case 2:
		alert("エラー \"分\"が正しくありません。0-60までで入力してください");
			timer_startandstop_flag = 0;
			timer_forminput_check_flag = 0;
		break;
		
	case 1:
		alert("エラー \"秒\"が正しくありません。0-60までで入力してください");
			timer_startandstop_flag = 0;
			timer_forminput_check_flag = 0;
		break;
		
	case 6:
		alert("エラー \"時間\"と\"分\"が正しくありません。0-60までで入力してください");
			timer_startandstop_flag = 0;
			timer_forminput_check_flag = 0;
		break;
		
	case 3:
		alert("エラー \"分\"と\"秒\"が正しくありません。0-60までで入力してください");
			timer_startandstop_flag = 0;
			timer_forminput_check_flag = 0;
		break;
		
	case 5:
		alert("エラー \"時間\"と\"秒\"が正しくありません。0-60までで入力してください");
			timer_startandstop_flag = 0;
			timer_forminput_check_flag = 0;
		break;
		

	default:	//例外が出たら、ストップしてデフォルト置き換え
		clearInterval(timer_set);
		timer_startandstop_flag = 0;
		document.getElementsByTagName("input").form_hour.value = "00";
		document.getElementsByTagName("input").form_min.value = "00";
		document.getElementsByTagName("input").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.getElementsByTagName("input").form_hour.value = hour;
document.getElementsByTagName("input").form_min.value = min;
document.getElementsByTagName("input").form_sec.value = sec;

if (preset_tmp_sec <= 0) {		// 	カウントダウンが終わったら
	document.getElementsByTagName("input").form_hour.value = "00";
	document.getElementsByTagName("input").form_min.value = "00";
	document.getElementsByTagName("input").form_sec.value = "00";

	clearInterval(timer_set);

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


//フォームから参照
function timer_forminput_set() { 

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

hour_f = eval(document.getElementsByTagName("input").form_hour.value);
min_f = eval(document.getElementsByTagName("input").form_min.value);
sec_f = eval(document.getElementsByTagName("input").form_sec.value);

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

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

//リセットや、三分タイマーなどのあらかじめ決まっている時間の時用
function timer_buttoninput_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.getElementsByTagName("input").form_hour.value = hour_b;
document.getElementsByTagName("input").form_min.value = min_b;
document.getElementsByTagName("input").form_sec.value = sec_b;

return false
}

//アップダウンボタンで数値可変
function timer_formset_updown(set , date) { 

var setdate , tmp;

switch (date){
	case "h":
		setdate = "form_hour";
		break;
	case "m":
		setdate = "form_min";
		break;
	case "s":
		setdate = "form_sec";
		break;
	defalut:
		break;
}
tmp = eval(document.getElementsByName(setdate).item(0).value); //フォームの値を変数に格納

//計算する
switch(set) {
	case "up":
		(timer_updown_limit(tmp , set))? tmp += 1 : void(0) ;
	break;

	case "down":
		(timer_updown_limit(tmp , set))? tmp -= 1 : void(0) ;
	break;

	defalut :
	break;
}

if(tmp<10){tmp = "0" + tmp;} //9以下の数字に0を付け加える

document.getElementsByName(setdate).item(0).value = tmp; //フォームに戻す。
}


// 時間指定のときに制限をする 0〜59、0の時はアップだけ入れれる、60の時はダウンだけ

//アップダウンしたときに発動
function timer_updown_limit(limit_tmp , updown_set) { 

if(((limit_tmp ==  0) && (updown_set == "down"))
   || ((limit_tmp ==  60) && (updown_set == "up"))){ //制限以上はfalseを返す
	alert("0-60までで、入力してください。");
	return false;

	} else if (((limit_tmp >= 0) && (updown_set == "up"))
			|| ((limit_tmp <= 60) && (updown_set == "down"))) { //制限内はtrueを出す
	return true;

	} else {
		alert("0-60までで、入力してください。");
		return false;
	}
}

//フォーム内の数値を制限チェック。0以上、60以下ならOK
//アクセス権のように、数値の合計から種類を分ける。hour=4 min=2 sec=1 として、flagに足していく。
function timer_forminput_limit(set_form_limit , form_date){

limit_tmp2 = eval(set_form_limit);

// alert(limit_tmp2);	//debug

if (limit_tmp2 < 0 || limit_tmp2 > 60) { // 0-60以外なら
	timer_forminput_check_flag += eval(form_date);
	} else {
	timer_forminput_check_flag += 0;
	}
}

js_timer.html

<html>
<head>
<title>タイマー	を作ったよ！</title>
<script language="JavaScript" src="js_timer.js"></script>
<link rel="stylesheet" type="text/css" href="js_timer.css" />
</head>
<body>

<form name="form1">

<div class="form_text">
	<input name="form_hour" value="00" size=2 class="textbox">
</div>

<div class="buttons">
	<a href="javascript:void(0);" onClick="timer_formset_updown('up' , 'h')">
		▲
	</a>

	<a href="javascript:void(0);" onClick="timer_formset_updown('down' , 'h')">
 		▼
	</a>
</div>

<span class="colon">:</span>

<div class="form_text">
	<input name="form_min" value="00" size=2 class="textbox">
</div>

<div class="buttons">
	<a href="javascript:void(0);" onClick="timer_formset_updown('up' , 'm')">
		▲
	</a>

	<a href="javascript:void(0);" onClick="timer_formset_updown('down' , 'm')">
		▼
	</a>
</div>

<span class="colon">.</span>

<div class="form_text">
	<input name="form_sec" value="00" size=2 class="textbox">
</div>

<div class="buttons">
	<a href="javascript:void(0);" onClick="timer_formset_updown('up' , 's')">
		▲
	</a>

	<a href="javascript:void(0);" onClick="timer_formset_updown('down' , 's')">
		▼
	</a>
</div>

<div class="buttons2">
<button type="button" class="positive" onClick="timer_buttoninput_set(0,3,0)">
	3min</button>
<button type="button" class="positive" onClick="timer_startandstop()">
	start/stop</button>
<button type="button" class="positive" onClick="timer_buttoninput_set(0,0,0)">
	reset</button>
</div>
</form>
</body>
</html>

js_timer.css

/* BUTTONS COLOR */
.buttons a, .buttons button, .buttons2 a, .buttons2 button{
    background-color:#ffffff;
    border:1px solid #dedede;
    border-top:1px solid #eee;
    border-left:1px solid #eee;
    color:#565656;
}

/* FORMS */
.form_text {
    float:left;
}

.form_text .textbox{
    font-size:130%;
}

/* colon */

.colon {
    float:left;
    font-size:130%;
}

/* BUTTONS */

.buttons {
    float:left;
}

.buttons a, .buttons button{
    display:block;
    margin:0 7px 0 0;

    position:relative;
    top:0px;

    font-size:50%;
    line-height:130%;
    text-decoration:none;
    font-weight:bold;
    cursor:pointer;
    padding:1px 1px 1px 1px; /* Links */
}

.buttons a img{
    margin:0 3px -3px 0 !important;
    padding:0;
    border:none;
    width:16px;
    height:16px;
}

/* BUTTONS2 */
.buttons2 {
    clear:left;
}

.buttons2 a, .buttons2 button{
    display:block;
    margin:0 7px 0 0;

    float:left;

    font-size:70%;
    line-height:130%;
    text-decoration:none;
    font-weight:bold;
    cursor:pointer;
    padding:0px 1px 0px 1px; /* Links */
}

.buttons2 a img{
    margin:0 3px -3px 0 !important;
    padding:0;
    border:none;
    width:16px;
    height:16px;
}