jQueryタイマーライブラリ「Countimer」の使い方

やりたいこと

Rails アプリで jQuery 使ったタイマーをサクっと導入したい。

jQuery ライブラリ「Countimer」

今回使う jQuery のライブライは「Countimer」。

「Download」より、ソースコードのZipファイルを取得できる。

今回は、その中の「dist/ez.countimer.min.js」を使う。

Rails でのセットアップ

「ez.countimer.min.js」を「app/javascripts/」配下に保存。

Countimer の利用には、別の JavaScript ライブラリ「momentjs」が必要なので、Gemfileよりインストールする。


# Gemfile
gem 'momentjs-rails'
$ bundle install

JSマニュフェストにも「moment」を追加。


# app/javascripts/application.js
//= require moment

必要なセットアップは以上。

Countimer の使い方

HTML

Countimerを表示させる「div class=’timer’」を用意する。


# html.slim
.timer

jQuery

jQueryで「div class=’timer’」にタイマーを描画する。


# html.slim
javascript:
    $(document).ready(function () {
        $('.timer').countimer({
            // Options if necessary
        });
    });

必要に応じてオプション値を指定する。

$('.timer').countimer({

  // In seconds : 0
  // In minutes: 1
  // In hours: 2
  displayMode : displayMode.FULL,

  // Enable the timer events
  enableEvents: false,

  // Auto start on inti
  autoStart : true,

  // Show hours
  useHours : true,

  // Custom indicator for minutes
  minuteIndicator: '',

  // Custom indicator for seconds
  secondIndicator: '',

  // Separator between each time block
  separator : ':',

  // Number of leading zeros
  leadingZeros: 2,

  // Initial time
  initHours : 0,
  initMinutes : 0,
  initSeconds: 0

});

使い方は以上。

簡単ですね!

兵庫県西宮市生まれのフリーランスRailsエンジニア。案件によってWordPressの作業も請け負ったりしてます。2014年から2016年にかけてオーストラリアで生活。 現在は東京を拠点に活動。/ 前職・資格:公認会計士 / プログラミング言語:Ruby, JavaScript, HTML, CSS / 日本語・英語
コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です