jQueryでつくる100秒タイマー

jQueryでつくる100秒タイマー

こんにちは。体力の続く限り桜の名所スポットを巡るツーリング計画を立てていましたが、土日が雨の予報でどうしようもない憤りを覚えている稲垣です。

さて、今回はjQueryで簡単なタイマーを作ってみました。
100秒にしたのは某ゲームに入れ込むハンター達の力になりたいという個人的な理由からです。

目次

デモ

htmlとcssと画像を用意する

動きの実装

終わり

デモ

早速ですが完成イメージです。

各要素の仕様は下記のようになります。

  • スタート…カウントダウン開始、一時停止を解除
  • ストップ…カウントダウンの一時停止
  • リセット…カウントダウンを停止して100秒へ戻す
  • 秒数変更…デフォルトの100秒を変更

htmlとcssと画像を用意する

html、css、画像パーツを準備します。
基本的に各要素を並べていくだけになります。
残り秒数のところだけgoogle fontを入れてオサレにしてみました。

html

#countDownと#errorの中身が空っぽですが、ここに残り時間と秒数変更時のエラー文が表示される形になります。

css

画像パーツ

スタート、ストップ、リセット、保存、の4つを準備します。

img150403_1

動きの実装

それではタイマーを動かしてみましょう!
まずはよく使う変数や関数をまとめて書き出していきます。

※1についてですが、スタートボタンを押した回数分setIntervalが実行されてしまうので、都度タイマーを解除しないと処理が重複されてしまい、ものすごい勢いでカウントが減っていきます。

続いて各ボタンを押した時に実行される処理を記述していきます。

終わり

以上、いかがでしたでしょうか。
最後に全てのコードをまとめて載せておきたいと思います。

無駄な処理をいっぱい書いてしまってそうなので、こうした方がスマートに書けるよ、など気になった点を教えていただけると泣いて喜びます。

それでは皆様、よいハンターライフを。

同じカテゴリー(WEB制作・デザイン)の記事