[mootools] Class – KitchenTimer

前エントリーのカウントダウンタイマークラスにカウントアップとか追加してキッチンタイマーっぽい代物に。
Javascriptなのでページ内埋め込みが出来るんだけどmootoolsが必要っていう。

使い方は続きに。

usage

1.ページにタイマー用の表示エリアを用意する

<p><button id="pause">Pause</button> <button id="start">Start</button> <button id="reset">Reset</button></p>
<div id="time"></div>

ストップ・スタート・リセットボタンと時間を表示する要素があれば動きます。

2.ヘッダにスクリプトタグを追加

<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="KitchenTimer.js"></script>

3.domreadyイベントを追加

<script type="text/javascript">
//<![CDATA[
window.addEvent('domready', function(){
	var kitchentimer =  new KitchenTimer($("time"),{
		limit:"180",
		mode:"down",
		onComplete:function(){$("time").set("text","Time Over");}
	});
	//停止
	$("pause").addEvent("click",function(){
		kitchentimer.pause();
	});
	
	//スタート
	$("start").addEvent("click",function(){
		kitchentimer.start();
	});
	
	//リセット
	$("reset").addEvent("click",function(){
		kitchentimer.reset();
	});
});
//]]>
</script>

$(element id)には、[1]で用意した表示エリアのボタンにつけたIDを入れます。

Class

new KitchenTimer([element,{options}]);

elementは時間を表示するDiv等の要素IDを指定します。
Optionsを指定する場合は省略できません。

Options

• limit:
  カウントダウン時の制限時間。単位は秒で数値指定します。デフォルトは60
• mode:
  動作モード。up→カウントアップ　down→カウントダウン。デフォルトはdown
• onComplete:
  カウントダウン終了時に実行する関数など。

methods

インスタンスに指定して実行可能な内部関数。

setlimit(time)
カウントダウン時の制限時間をセットします。単位は秒

var kitchentimer =  new KitchenTimer($("time"));
kitchentimer.setlimit(180);//180秒にセット

setmode(mode)
動作モードをセットします。”up”または”down”

var kitchentimer =  new KitchenTimer($("time"));
kitchentimer.setmode(”up");//カウントアップモードにセット

start()
タイマーをスタートさせます。

pause()
タイマーをストップします。

reset()
タイマーを初期化します。
setlimit()とsetmode()にはセットで使用してください。

var kitchentimer =  new KitchenTimer($("time"));
kitchentimer.setmode(”up");//カウントアップモードにセット
kitchentimer.reset();

分と秒のカウント機能しかないので、60分以上1秒以下のカウントは出来ません。
クラスのインスタンスと表示エリアを複数作れば作った分だけタイマーが表示されます。

“KitchenTimer” をダウンロード

WTN-KitchenTimer.zip – 1293 回のダウンロード – 23.12 KB