JavaScriptを使ってクッキングタイマーを作る
JavaScript でフォームデータを制御する場合、action や method の指定は不要です。簡単なJavaScriptを使って、クッキングタイマーを作る例をご紹介します。
このサンプルで使用している JavaScriptのイベントおよびタイマーは次の通りです。
ボタンが押されたときに関数を呼び出す
<input type="タイプ" onMouseDown="実行する関数">
<input type="タイプ" onMouseDown="実行する関数">
- タイプ：button、text、radioなど。ここでは button を指定しています。
- 実行する関数：JavaScriptの関数を指定します。JavaScript内で、『 function 関数名() { ～ 』 などと記述されるものです。ここでは、それぞれのボタンが押されると、Input(inputData)やStart()、Clear()などの関 数を呼び出すように指定しています。
一定時間ごとに処理を行う(タイマーを指定する)
タイマーを識別する変数=setInterval(実行する関数,指定時間)
タイマーを解除する
clearInterval(タイマーを識別する変数)
- タイマーを識別する変数：省略可能ですが、タイマーを解除する場合には識別するために変数が必 要です。ここでは、タイマーを Count という変数で指定および解除をしています。
- 実行する関数：JavaScriptの関数を指定します。ここでは、Startボタンが押されると、『 setInterval( 'Cookingtimer()',1000 ) 』の部分で、指定時間ごとに Cookingtimer という関数を呼び出すように設定 しています。
- 指定時間：ミリ秒(1/1000秒)の指定になります。1秒ごとであれば、1000となります。
このサンプルのソースは、次のようになっています。
ランキングに参加中です! お役に立てたらクリックをお願いします→
コンピュータとインターネット > データ形式 > HTML > リファレンス