カウントダウンやタイマーなど、時間コンテンツなら何でも任せろのシンプルな軽量スクリプト -EasyTimer.js

時間を表示させるカウントダウン、タイマー、ストップウォッチなどのコンテンツなら何でも任せろのシンプルな軽量スクリプトを紹介します。

単体のスクリプトとして利用でき、時間を使ったWebページを実装する際に重宝すると思います。

サイトのキャプチャ

EasyTimer.js
EasyTimer.js -GitHub

EasyTimer.jsの特徴

  • リフレッシュの間隔は、時、分、秒、1/10秒に設定できます。
  • タイマーの開始、停止、一時停止など、すべてのタイプでイベントが設定できます。
  • カスタムコールバックを定義することができ、タイマーのリフレッシュごとに実行されます。
  • タイマーには、経過とカウントダウンの2種類があります。
  • 開始時間と目標時間を設定できます。

EasyTimer.jsのデモ

デモでは、EasyTimer.jsを使ったさまざまな時間コンテンツを試せます。

デモのキャプチャ

デモページ: Basic Usage

デモのキャプチャ

デモページ: Start, Pause, Stop and Reset

デモのキャプチャ

デモページ: Countdown Timer

デモのキャプチャ

デモページ: Interval of Tenth of Seconds

EasyTimer.jsの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして、記述します。
VanillaJSだけでなく、NodeJS、RequireJSでも使用できます。

Step 2: HTML

時間コンテンツを配置するHTMLを用意します。

Step 3: タイマーの起動

タイマーの起動は非常に簡単です。タイマーの新しいインスタンスを取得し、startメソッドを呼び出します。

カウントダウンにする際には、startメソッドにcountdownを渡します。

sponsors

top of page

©2018 coliss