TOPページ >  フォームを作成する, タイマーや日付、日時を扱う > JavaScriptを使ってクッキングタイマーを作る

JavaScriptを使ってクッキングタイマーを作る

JavaScript でフォームデータを制御する場合、action や method の指定は不要です。簡単なJavaScriptを使って、クッキングタイマーを作る例をご紹介します。

min sec
JavaScript CookingTimer
時間(分)を入力して Startボタンを押してください

このサンプルで使用している JavaScriptのイベントおよびタイマーは次の通りです。

ボタンが押されたときに関数を呼び出す
<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となります。

このサンプルのソースは、次のようになっています。

ランキングに参加中です! お役に立てたらクリックをお願いします→

同一カテゴリ内一覧
JavaScriptを使って最終更新日を表示する
JavaScriptで文字を点滅させる
JavaScriptを使って現在の時刻を表示する
JavaScriptを使って今日の日付を表示する
JavaScriptを使ってクッキングタイマーを作る
文字をスクロールして表示する
IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス