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

サイト構築 -JavaScript

Post on:2018年2月5日

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でも使用できます。

<script src="lib/easytimer/dist/easytimer.min.js"></script>
<script>
    var timerInstance = new Timer();
</script>

var timerInstance = new Timer();

</script>

Step 2: HTML

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

<div id="basicUsage">00:00:00</div>

1	<div id="basicUsage">00:00:00</div>

Step 3: タイマーの起動

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

var timer = new Timer();
timer.start();
timer.addEventListener('secondsUpdated', function (e) {
    $('#basicUsage').html(timer.getTimeValues().toString());
});

var timer = new Timer();

timer.start();

timer.addEventListener('secondsUpdated', function (e) {

$('#basicUsage').html(timer.getTimeValues().toString());

});

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

var timer = new Timer();
timer.start({countdown: true, startValues: {seconds: 30}});
$('#countdownExample .values').html(timer.getTimeValues().toString());
timer.addEventListener('secondsUpdated', function (e) {
    $('#countdownExample .values').html(timer.getTimeValues().toString());
});
timer.addEventListener('targetAchieved', function (e) {
    $('#countdownExample .values').html('KABOOM!!');
});