jQueryカウントダウンタイマー

かなり出回っていますが、ちょっと作ってみたかったので作りました。カウントダウンタイマーで検索するとかなりの数ありますね。

ちょっとお手軽のタイマーを作ってみました。jQueryのプラグインとかでありますけど、まあ普通にカウントダウンするだけなら簡単に出来ますね。

サンプルでは自分で決めた時間をカウント・ダウンします。


スポンサーリンク

jQueryでのコード

一応今年(2012年)の12月24日のカウントダウンをします。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>カウントダウンタイマー</title>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function() {
	countDown();
 });
 
 function countDown() {
 	var startTime = new Date();
 	//カウントダウンの終了期日を記入↓
    var endTime = new Date('December 24,2012, 01:00:00');
    var diff  = endTime - startTime;
    var times = 24 * 60 * 60 * 1000;
    var day   = Math.floor(diff / times)
    var hour  = Math.floor(diff % times / (60 * 60 * 1000))
    var min   = Math.floor(diff % times / (60 * 1000)) % 60
    var sec   = Math.floor(diff % times / 1000) % 60 % 60
    var ms    = Math.floor(diff % times / 10) % 100
    if(diff > 0){
    	$("#Timer").text(day + '日' + hour + '時間' + min + '分' + sec +'秒' + ms);
    	setTimeout('countDown()', 10);
    } else {
    	//終了した時のテキスト
    	$("#Timer").text('終了しました!');
    }
 }
</script>
</head>
<body>
<div class="container">
<h1>jQueryのカウントダウンタイマー</h1>   
<blockquote>
<div id="Timer"></div>
</blockquote>
</div>
</body>
</html>

デモページも作りましたのでご覧くださいませ。

デモサイト

Pocket
LINEで送る

スポンサーリンク

1件のコメント

コメントを残す

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