Simple.Timer.jsで簡単にカウントダウンタイマーを設置する

ウェブサイトにソースを読み込ませるだけで簡単にカウントダウンタイマーを設置できるJSを紹介します。

それが「Simple.Timer.js」!!

実際の実装サンプルは以下です。
このサイトより必要なファイルもダウンロードできます。
https://csouza.me/jQuery-Simple-Timer/

ソースは簡単。
公式サイトよりソースをダウンロードして以下のファイルを読み込みます。
あとはbody内にclass=timerなどをセットして、JSを記述するだけ。

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.js"></script>
<script src="jquery.simple.timer.js"></script>
</head>

<body>
<div class="timer" data-minutes-left="30"></div>
</body>

* {
  padding: 0;
  margin: 0;
  background-color: #333;
}

.timer {
justify-content: center;
}

.jst-hours,.jst-minutes,.jst-seconds {
font-size: 8vw;
color: #fff;
font-weight: 600;
}

$(function(){
	$('.timer').startTimer({
		onComplete: function(element){
			element.addClass('is-complete');
		}
	});
});

cssで自由に調整できるのがまた良いですよね！

上記のdata-minutes-left=”30″は30分で設定しています。
秒で設定したいときはdata-seconds-left=”60″と記述するれば秒の設定が可能です。

ぜひみなさんもサイトにカウントダウンタイマーを設置してみてくださいね！

Share: