極楽せきゅあブログ

ときどきセキュリティ

タイマー

その他

キャラバンで喋るとき、ふと気づくと時計が視界に入らない、もしくは会場に無いことがあるんですよね。以前はガジェットとか使っていたんだけど、もっと見やすいのが良いなあって思って、ちょっとJavascriptのお勉強がてら作ってみました。

<html>
<body>
<center>
<span id="text" style="font-size:200px;">00:00</span>
<script language="JavaScript">
<!--
k=0;
m=0;
function test(i,j){
    if (k==0) {
        var tid=setInterval("jikken()",1000);
        k=1;
    }
}

function jikken(){
    if ((i==0) || (i==j)) {
        clearInterval(tid);
    }
    else {
        s=i % 60;
        s=( s < 10 ) ? ( "0" + s ) : ( s );
        m=Math.floor( i / 60 );
        m=( m < 10 ) ? ( "0" + m ) : ( m );
	document.getElementById("text").firstChild.nodeValue=m+":"+s;
        i++;
    }
}
//-->
</script>
<br>
設定時刻が来たら、カウントは止まります。<br>
リセットするときはF5キーや再読込ボタンなどでリロードしてください。<br>
<input type="button" onclick="i=1;j=11;test(i,j);" value="10秒">
<input type="button" onclick="i=1;j=61;test(i,j);" value="1分">
<input type="button" onclick="i=1;j=121;test(i,j);" value="2分">
<input type="button" onclick="i=1;j=181;test(i,j);" value="3分">
<input type="button" onclick="i=1;j=301;test(i,j);" value="5分">
<input type="button" onclick="i=1;j=601;test(i,j);" value="10分">
<input type="button" onclick="i=1;j=901;test(i,j);" value="15分">
<input type="button" onclick="i=1;j=1201;test(i,j);" value="20分"><br>
<input type="button" onclick="i=1;j=1501;test(i,j);" value="25分">
<input type="button" onclick="i=1;j=1801;test(i,j);" value="30分">
<input type="button" onclick="i=1;j=2101;test(i,j);" value="35分">
<input type="button" onclick="i=1;j=2401;test(i,j);" value="40分">
<input type="button" onclick="i=1;j=2701;test(i,j);" value="45分">
<input type="button" onclick="i=1;j=3001;test(i,j);" value="50分">
<input type="button" onclick="i=1;j=3301;test(i,j);" value="55分">
<input type="button" onclick="i=1;j=3601;test(i,j);" value="60分">
<br>
<input type="button" onclick="i=0;test(i,j);" value="カウントを止める">
</center>
</body>
</html>

上のヤツは時間が来ると表示が止まるヤツですね。
で、こっちは、ロスタイム表示になるヤツ。

<html>
<body>
<center>
<span id="text" style="font-size:200px;">00:00</span>
<script language="JavaScript">
<!--
k=0;
m=0;
function test(i,j){
    if (k==0) {
        var tid=setInterval("jikken()",1000);
        k=1;
    }
}

function jikken(){
    if (i==j) document.getElementById("text").style.color = "red";
    if (i==0) {
        clearInterval(tid);
    }
    else {
        s=i % 60;
        s=( s < 10 ) ? ( "0" + s ) : ( s );
        m=Math.floor( i / 60 );
        m=( m < 10 ) ? ( "0" + m ) : ( m );
	document.getElementById("text").firstChild.nodeValue=m+":"+s;
        i++;
    }
}
//-->
</script>
<br>
設定時刻が来たら、ロスタイム表示（赤）になります。<br>
リセットするときはF5キーや再読込ボタンなどでリロードしてください。<br>
<form name="pit">
<input type="button" onclick="i=1;j=11;test(i,j);" value="10秒">
<input type="button" onclick="i=1;j=61;test(i,j);" value="1分">
<input type="button" onclick="i=1;j=121;test(i,j);" value="2分">
<input type="button" onclick="i=1;j=181;test(i,j);" value="3分">
<input type="button" onclick="i=1;j=301;test(i,j);" value="5分">
<input type="button" onclick="i=1;j=601;test(i,j);" value="10分">
<input type="button" onclick="i=1;j=901;test(i,j);" value="15分">
<input type="button" onclick="i=1;j=1201;test(i,j);" value="20分"><br>
<input type="button" onclick="i=1;j=1501;test(i,j);" value="25分">
<input type="button" onclick="i=1;j=1801;test(i,j);" value="30分">
<input type="button" onclick="i=1;j=2101;test(i,j);" value="35分">
<input type="button" onclick="i=1;j=2401;test(i,j);" value="40分">
<input type="button" onclick="i=1;j=2701;test(i,j);" value="45分">
<input type="button" onclick="i=1;j=3001;test(i,j);" value="50分">
<input type="button" onclick="i=1;j=3301;test(i,j);" value="55分">
<input type="button" onclick="i=1;j=3601;test(i,j);" value="60分">
</form>
<br>
<input type="button" onclick="i=0;test(i,j);" value="カウントを止める">
</center>
</body>
</html>

正直引数だとかそのへん全然わかってないので（笑）、実験する意味も含めて書いてるから変なコードになってると思います。元ネタはこのへん（http://www.geocities.jp/miyake_kobo/js/koubun_002.html）です。
あと、10秒のボタンはデバッグテスト用ですので、消した方が良いかも（笑）。
おわかりのとおりですが、テキストエディタにコピペしてaaa.htmlとかいうファイルで保存して、それをWebブラウザにドラッグ＆ドロップすれば使えるし、サーバーに置いておいて読み込んでも使えますね。Javascriptが必要だけど。
ファイルそのものをサーバーに置いておきましたので、面倒な場合はそちらを使ってみてちょ。
http://www.asahi-net.or.jp/~vp5m-snd/timer.html
http://www.asahi-net.or.jp/~vp5m-snd/timerLosstime.html
ついでにカウントダウンのヤツも作ってみました。
http://www.asahi-net.or.jp/~vp5m-snd/timerDown.html
ここまでで今日は時間切れです。残念ｗ。
とかいいつつ、最後にカウントダウン＋ロスタイムなヤツだけちょこっと作ってみました。
http://www.asahi-net.or.jp/~vp5m-snd/timerDownLosstime.html