指定した日時までカウントダウンする処理を画像で表示する

以前に書いた記事「指定した期限までの時間をカウントダウンする処理」の数字を画像にしたバージョンです。

サンプルコード

HTML

以下のような0～9までを縦に並べた画像を使用し、topの値を変更して数値を切り替えます。

<div id="countdown-unit">
	<div><img src="num.gif" width="20" height="220" id="day-thousand"></div>
	<div><img src="num.gif" width="20" height="220" id="day-hundred"></div>
	<div><img src="num.gif" width="20" height="220" id="day-ten"></div>
	<div><img src="num.gif" width="20" height="220" id="day-one"></div>
	<div><img src="day.gif" width="20" height="22"></div>
	<div><img src="num.gif" width="20" height="220" id="hour-ten"></div>
	<div><img src="num.gif" width="20" height="220" id="hour-one"></div>
	<div><img src="time.gif" width="20" height="22"></div>
	<div><img src="num.gif" width="20" height="220" id="minute-ten"></div>
	<div><img src="num.gif" width="20" height="220" id="minute-one"></div>
	<div><img src="time.gif" width="20" height="22"></div>
	<div><img src="num.gif" width="20" height="220" id="second-ten"></div>
	<div><img src="num.gif" width="20" height="220" id="second-one"></div>
	<div><img src="time.gif" width="20" height="22"></div>
	<div><img src="num.gif" width="20" height="220" id="flame-ten"></div>
	<div><img src="num.gif" width="20" height="220" id="flame-one"></div>
</div>

CSS

#countdown-unit div {
	position: relative;
	float: left;
	width: 20px;
	height: 22px;
	overflow: hidden;
}
#countdown-unit div img {
	position: absolute;
	top: 0;
	left: 0;
}

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 numHeight = 22;

// 使用する変数
var currentTime, period,
	cDay, ｃDayHundred, ｃDayTen, ｃDayOne,
	cHour, ｃHourTen, ｃHourOne,
	cMinute, cMinuteTen, cMinuteOne,
	cSecond, cSecondTen, cSecondOne,
	cFlame, cFlameTen, cFlameOne,
	insert = "";

// カウント用画像の指定
var dayThousand = document.getElementById('day-thousand'),
	dayHundred = document.getElementById('day-hundred'),
	dayTen = document.getElementById('day-ten'),
	dayOne = document.getElementById('day-one'),
	hourTen = document.getElementById('hour-ten'),
	hourOne = document.getElementById('hour-one'),
	minuteTen = document.getElementById('minute-ten'),
	minuteOne = document.getElementById('minute-one'),
	secondTen = document.getElementById('second-ten'),
	secondOne = document.getElementById('second-one'),
	flameTen = document.getElementById('flame-ten'),
	flameOne = document.getElementById('flame-one');

// カウントダウンの処理
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));
		// 桁数を4桁に揃える
		cDay = String(cDay);
		while(cDay.length < 4) {
			cDay = '0' + cDay;
		}
		// 画像の切り替え
		dayThousand.style.top = (- cDay.substr(0, 1) * numHeight) + 'px';
		dayHundred.style.top = (- cDay.substr(1, 1) * numHeight) + 'px';
		dayTen.style.top = (- cDay.substr(2, 1) * numHeight) + 'px';
		dayOne.style.top = (- cDay.substr(3, 1) * numHeight) + 'px';

		// 時間を取得
		cHour = Math.floor(period / (1000 * 60 * 60));
		period -= (cHour * (1000 * 60 * 60));
		// 桁数を2桁に揃える
		cHour = String(cHour);
		while(cHour.length < 2) {
			cHour = '0' + cHour;
		}
		// 画像の切り替え
		hourTen.style.top = (- cHour.substr(0, 1) * numHeight) + 'px';
		hourOne.style.top = (- cHour.substr(1, 1) * numHeight) + 'px';

		// 分を取得
		cMinute = Math.floor(period / (1000 * 60));
		period -= (cMinute * (1000 * 60));
		// 桁数を2桁に揃える
		cMinute = String(cMinute);
		while(cMinute.length < 2) {
			cMinute = '0' + cMinute;
		}
		// 画像の切り替え
		minuteTen.style.top = (- cMinute.substr(0, 1) * numHeight) + 'px';
		minuteOne.style.top = (- cMinute.substr(1, 1) * numHeight) + 'px';

		// 秒を取得
		cSecond = Math.floor(period / (1000));
		period -= (cSecond * (1000));
		// 桁数を2桁に揃える
		cSecond = String(cSecond);
		while(cSecond.length < 2) {
			cSecond = '0' + cSecond;
		}
		// 画像の切り替え
		secondTen.style.top = (- cSecond.substr(0, 1) * numHeight) + 'px';
		secondOne.style.top = (- cSecond.substr(1, 1) * numHeight) + 'px';

		// フレーム
		cFlame = Math.floor(period / (10));
		// 桁数を2桁に揃える
		cFlame = String(cFlame);
		while(cFlame.length < 2) {
			cFlame = '0' + cFlame;
		}
		// 画像の切り替え
		flameTen.style.top = (- cFlame.substr(0, 1) * numHeight) + 'px';
		flameOne.style.top = (- cFlame.substr(1, 1) * numHeight) + 'px';

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

	// 期限を過ぎた時
	} else {

	}
}

// 処理の実行
countdown();

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