指定した期限までの時間をカウントダウンする処理

指定した時間までのカウントダウンをJavaScriptで作る機会があったのでメモ。

サンプルコード

HTML

#countdown-unitの中にカウントダウンの数字を入れます。

<div id="countdown-unit"></div>

JavaScript

// 期限の設定
var gYear = 2020, // 年
	gMonth = 7, // 月
	gDay = 24, // 日
	gHour = 0, // 時
	gMinute = 0, // 分
	gSecond = 0; // 秒

var goal = new Date(gYear, gMonth-1, gDay, gHour, gMinute, gSecond);

// 使用する変数の宣言
var currentTime, period,
	cDay, cHour, cMinute, cSecond,
	insert = "";

// カウントダウンの処理
function countdown() {

	// 現在から期限日までの差を取得
	currentTime = new Date();
	period = goal.getTime() - currentTime.getTime();

	// 期限を過ぎていない時
	if(period >= 0) {
		// 日数を取得
		cDay = Math.floor(period / (1000 * 60 * 60 * 24));
		period -= (cDay * (1000 * 60 * 60 * 24));

		// 時間を取得
		cHour = Math.floor(period / (1000 * 60 * 60));
		period -= (cHour * (1000 * 60 * 60));

		// 分を取得
		cMinute = Math.floor(period / (1000 * 60));
		period -= (cMinute * (1000 * 60));

		// 秒を取得
		cSecond = Math.floor(period / (1000));
		period -= (cSecond * (1000));

		// フレーム
		cFlame = Math.floor(period / (10));

		// 残り日数の書き換え
		insert = "";
		insert += '<span class="d">' + cDay + '</span>' + "日";
		insert += '<span class="h">' + cHour + '</span>' + ":";
		insert += '<span class="m">' + cMinute + '</span>' + ":";
		insert += '<span class="s">' + cSecond + '</span>' + ":";
		insert += '<span class="f">' + cFlame + '</span>' + "";
		document.getElementById('countdown-unit').innerHTML = insert;

		// カウントダウンの処理を再実行
		setTimeout(countdown, 10);

	// 期限を過ぎた時
	} else {
		document.getElementById('countdown-unit').innerHTML = 'Time Up';
	}
}

// 処理の実行
countdown();

カウントダウンのデモページ

あまりこういった処理を作ったことがなかったのですが、カウントダウンだけではなくて
年が明けたらサイトのバナーを差し替えたい、みたいなのとか色々使いどころがありそうに思います。