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">秒 &nbsp;&nbsp; 予鈴 <input type="text" id="membernum" size="1.5" name="Sec_yorei">分前 &nbsp;&nbsp; <input type="button" value="SET" onClick="setMin()"> &nbsp;&nbsp; &nbsp;&nbsp; <input type="button" value="START/STOP" onClick="suspend()"> &nbsp;&nbsp; <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>