【JavaScript】タイマーを作ってみる

スポンサーリンク
タイマーアイキャッチ プログラミング

こんにちは!セミマサです。

今回はJavaScriptを使って入力された秒数が経過したら音を鳴らすタイマーを作ってみました。

デモサイト

今回のデモサイトです。

お借りした効果音

効果音は効果音ラボ様からお借りしました。

ソースコード

HTML

・JavaScriptで参照するために各要素にidを付与しておきます。

・入力欄は数字のみ入れられるようtypenumberを指定しています。

・鳴らしたい効果音をaudioタグで埋め込んでいます。

CSS

今回のCSSです。

JavaScript

・配列timerと変数countをグローバルに定義しています。

ボタンクリック時の処理

①:入力された値を変数secに代入します。この時secが空白もしくはマイナスの値だった場合早期リターンし、警告メッセージを表示します。正規の入力が行われた時に警告メッセージを非表示にします。

②:nowDateに現在の時刻を代入し、endDateにタイマーの終了時刻を代入します。終了時刻の計算はエポックミリ秒によるものです。

③:グローバル変数countsecを代入します。

④:配列timersetTimer関数を追加します。setInterval関数によって1秒毎にsetTimer関数が実行されます。

※すでにタイマーが起動中の時に正規の処理が行われた場合、setTimer関数を追加する前にstopTimer関数が呼ばれます。

setTimer関数

メインとなる関数です。

countのマイナスと文言の更新を行い、nowDateに現在時刻を代入します。

・現在時刻のエポックミリ秒が終了時刻のエポックミリ秒以上の場合、文言の変更・stopTimer関数の実行・効果音の再生をします。

stopTimer関数

タイマーを止める関数です。

shift()メソッドで配列timerの最初の要素を取り出し、その要素に対してclearInterval関数を実行します。

おわりに

無事動くものが作れました。

タイトルとURLをコピーしました