@charset "utf-8";
#countdown-unit div {
position: relative;
float: left;
width: 60px;
height: 40px;
overflow: hidden;
}
#countdown-unit div img {
position: absolute;
top: 0;
left: 0;
} // 期限の設定
var gYear = 2021, // 年
gMonth = 10, // 月
gDay = 1, // 日
gHour = 0, // 時
gMinute = 0, // 分
gSecond = 0; // 秒
var goal = new Date(gYear, gMonth - 1, gDay, gHour, gMinute, gSecond);
// 画像の高さの設定
var numHeight = 40;
// 使用する変数
var currentTime, period,
cDay, ｃDayHundred, ｃDayTen, ｃDayOne,
cHour, ｃHourTen, ｃHourOne,
cMinute, cMinuteTen, cMinuteOne,
cSecond, cSecondTen, cSecondOne,
cFlame, cFlameTen, cFlameOne,
insert = "";
// カウント用画像の指定
var 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;
}
// 画像の切り替え
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();
