カウントダウンタイマーの実装方法

今回は発売日や開始日が後何日まであるかすぐにわかるカウントダウンタイマーを実装したいと思います。

例として来年に延期された東京オリンピック開幕日、2021年7月23日まで現在あと何日何時何分何秒あるかのカウントダウンを表示したいと思います。

STEP 1
STEP 2
結果

STEP 1

今回利用するのがjQueryプラグイン「yycoutdown」です。
このプラグインがあればすぐにカウントダウンタイマーが実装できます。
まずは以下のボタンからサイトにアクセスしてプラグインをダウンロードしてください。

STEP 2

ダウンロードしたファイルの中にsample.htmlがあると思いますが後はこのファイルを自分好みに変更するだけです。

今回は東京オリンピックの日付にしました。


<link rel="stylesheet" href="./common/css/reset.css">
<link rel="stylesheet" href="./common/css/common.css">
<link rel="stylesheet" href="./css/jquery.yycountdown.css">


<div id="contents">
	<div class="inner">
		<div id="olympic">
			TOKYO<span>●</span>2020
		</div>
		<div id="olympicDate">
			東京オリンピック　2021年7月23日（金）
		</div>
		<div id="timer"></div>
	</div><!-- inner -->
</div><!-- contents -->

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery.yycountdown.min.js"></script>
<script type="text/javascript">
	$("#timer").yycountdown({
		endDateTime   : '2021/07/23 00:00:00',
		unit          : {d: '日', h: '時間', m: '分', s: '秒'},
	});
</script>

結果

以下でカウントダウンタイマーの実装完了です。