タイムキーパー用 Javascript

WordCamp Kyoto 2009 で使用したコードです。Javascript で適当に書いたものです。「一秒休んでから画面描画」を一秒としているので、時間の測定は正確ではありません (ライトニングトークぐらいなら十分な精度ですけど)。JS はそんなに詳しい訳ではありませんのでご了承ください。

動作確認は IE7 のみです。予鈴と終了音は、embed でメディアプレーヤーを呼び出す設計なので、Windows のみ対応です。音を鳴らすには、ファイルと同じ場所に予鈴、終了音のファイルを置くか、パスを設定してください。

<html>
<head>
	<style type="text/css">
	body {
		backgmember-color:black;
		color:white;
		font-size:larger;
		text-align:center;
		margin:0;
	}
	#membernum {
		vertical-align:bottom;
		text-align:center;
	}

	#num {
		backgmember-color:black;
		text-align:right;
		vertical-align:top;
	}
	</style>
</head>
<body onLoad="defaultFunc()">

<form name="mes">
<input type="text" id="membernum" size="1.5" name="Rnd">
<input type="text" id="num" size="1.5" name="Min">
<input type="text" id="num" size="1.5" name="Sec">
<br><br>
<input type="text" id="membernum" size="1.5" name="Member_end">人
<input type="text" id="membernum" size="1.5" name="Min_in">分
<input type="text" id="membernum" size="1.5" name="Sec_in">秒
  

予鈴
<input type="text" id="membernum" size="1.5" name="Sec_yorei">分前
  
<input type="button" value="SET" onClick="setMin()">
  
  
<input type="button" value="START/STOP" onClick="suspend()">
  
<input type="button" value="NEXT" onClick="nextMember()">
<br>
<br>
</form>
	<script language="JavaScript">
	DefaultMin = 5;
	DefaultSec = 0;
	DefaultYorei = 1;
	Member = 1;
	TotalMember = 5;

	// ここから下は編集不要
	Second = DefaultSec;
	Minute = DefaultMin;

	State = 2; // 0:end 1:go 2:stop

	function setMin(){

		if (document.mes.Member_end.value >= 1) {
			TotalMember = Math.floor(document.mes.Member_end.value);
		} else {
			TotalMember = 1;
		}

		if (document.mes.Min_in.value >= 1) {
			DefaultMin = Math.floor(document.mes.Min_in.value);
		} else {
			DefaultMin = 1;
		}

		if (document.mes.Sec_in.value > 59) {
			DefaultSec = 59;
		} else if (document.mes.Sec_in.value >= 1) {
			DefaultSec = Math.floor(document.mes.Sec_in.value);
		} else {
			DefaultSec = 0;
		}

		if (document.mes.Sec_yorei.value >= 0) {
			DefaultYorei = Math.floor(document.mes.Sec_yorei.value);
		} else {
			DefaultYorei = 2;
		}

		rewind();
	}


	function defaultFunc(){
		mes.Min.style.color = "white";
		mes.Sec.style.color = "white";
		mes.Min.style.fontSize = document.body.clientWidth/3.3;
		mes.Sec.style.fontSize = document.body.clientWidth/3.3;
		mes.Rnd.style.fontSize = document.body.clientWidth/10;
		document.mes.Member_end.value = TotalMember;
		document.mes.Min_in.value = DefaultMin;
		document.mes.Sec_in.value = DefaultSec;
		document.mes.Sec_yorei.value = DefaultYorei;
	}

	function resizeText(){
		mes.Min.style.fontSize = document.body.clientWidth/3.3;
		mes.Sec.style.fontSize = document.body.clientWidth/3.3;
		mes.Rnd.style.fontSize = document.body.clientWidth/10;
	}

	window.onresize = resizeText;

	function getTimer(){

		if (State == 0) {

		} else if (State == 2) {

		} else if (Minute == 0 && Second == 0) {
			document.idou.play();
			if (Member == TotalMember) {
				State = 0;
			} else {
			Member++;
			rewind();
			State = 2;
			}
		} else if (Minute == DefaultYorei && Second == 0) {
			document.yorei.play();
			Second = 59;
			Minute--;
			mes.Min.style.color = "yellow";
			mes.Sec.style.color = "yellow";
		} else if (Second == 0) {
			Second = 59;
			Minute--;
		} else {
			Second--;
		}
		document.mes.Sec.value = Second;
		document.mes.Min.value = Minute;
		document.mes.Rnd.value = Member;

	}

	function suspend(){

		if (State == 2) {
			State = 1;
		} else if (State == 1) {
			State = 2;
		}
	}

	function nextMember(){
		if (Member < TotalMember) {
		Member++;
		document.mes.Member_start.value = Member;
		rewind();
		}
		endTime();
	}
	function rewind(){
		mes.Min.style.color = "white";
		mes.Sec.style.color = "white";
		Second = DefaultSec;
		Minute = DefaultMin;
	}


	setInterval("getTimer()",1000);

	</script>

<!-- メディアプレーヤー埋め込み -->
<embed src="ding.wav" autostart="false" hidden="false" name="yorei" VOLUME="100"></embed>
<embed src="ringin.wav" autostart="false" hidden="false" name="idou" VOLUME="100"></embed>

</body>
</html>