JavaScriptを使ってデジタル風のカウントダウンタイマーを作成

※当サイトにはプロモーションが含まれています。

クライアントクライアント

LPやSPに設置するカウントダウンタイマーを作成してくれ

にゃテックにゃテック

おけまるだにゃ

あまり見なくなりましたが、ランディングページ（LP）や、セールスページ（SP）に、よく設置されていたのが「カウントダウンタイマー（Count Down Timer）」です。

最近は、LPやSPではなく、サンクスページに設置することが多いようです。

今回は、HTML、CSS、JavaScriptを使って、デジタル風のカウントダウンタイマーを作成してみました。

カウントダウンタイマーを作成するコード

HTML、CSS、JavaScriptを使って作成したカウントダウンタイマーです。

HTML

<div class="nya-timer-wrapper">
<div class="nya-timer-container">
<span class="nya-message">募集期間はあと、</span>
<span class="nya-timer">
<span id="nya-days">00</span>日<span id="nya-hours">00</span>時間
<span id="nya-minutes">00</span>分 <span id="nya-seconds">00</span>秒 
<span id="nya-milliseconds">00</span>
</span>
<span class="nya-message">で終了します</span>
</div>
</div>

カウントダウンタイマーを表示したい箇所に、このHTMLを記述します。

CSS

.nya-timer-wrapper {
display: flex;
justify-content: center;
align-items: center;
}

.nya-timer-container {
background-color: #000;
padding: 20px;
border-radius: 10px;
color: #FFFFFF;
font-family: 'Arial', sans-serif;
font-size: 18px;
text-align: center;
width: 700px;
}

.nya-timer {
font-family: 'Orbitron', sans-serif;
font-size: 22px;
color: #00FF00;
text-shadow: 0 0 10px #00FF00;
display: inline-block;
vertical-align: middle;
letter-spacing: 2px;
}

.nya-timer span {
display: inline-block;
width: 46px; /* 各数字の幅を固定 */
text-align: center;
}

.nya-message {
display: inline-block;
vertical-align: middle;
}

デジタル風の数字を表現する際に、Google Fonts「Orbitron」のWebフォントを使用しました。

.nya-timer spanのwidthを使用して、各数字の幅を固定して見た目を調整しています。

JavaScript

function startCountdown(duration, displayDays, displayHours, displayMinutes, displaySeconds, displayMilliseconds) {
let timer = duration, days, hours, minutes, seconds, milliseconds;
const interval = setInterval(function () {
days = parseInt(timer / (24 * 60 * 60 * 1000), 10);
hours = parseInt((timer % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000), 10);
minutes = parseInt((timer % (60 * 60 * 1000)) / (60 * 1000), 10);
seconds = parseInt((timer % (60 * 1000)) / 1000, 10);
milliseconds = parseInt((timer % 1000) / 10, 10);

days = days < 10 ? "0" + days : days;
hours = hours < 10 ? "0" + hours : hours;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
milliseconds = milliseconds < 10 ? "0" + milliseconds : milliseconds;

displayDays.textContent = days;
displayHours.textContent = hours;
displayMinutes.textContent = minutes;
displaySeconds.textContent = seconds;
displayMilliseconds.textContent = milliseconds;

if (--timer < 0) {
clearInterval(interval);
document.querySelector('.nya-timer-container').textContent = "募集は終了しました";
}
}, 10);
}

window.onload = function () {
const duration = 2 * 24 * 60 * 60 * 1000; // 2日間のカウントダウン
const displayDays = document.getElementById('nya-days');
const displayHours = document.getElementById('nya-hours');
const displayMinutes = document.getElementById('nya-minutes');
const displaySeconds = document.getElementById('nya-seconds');
const displayMilliseconds = document.getElementById('nya-milliseconds');
startCountdown(duration, displayDays, displayHours, displayMinutes, displaySeconds, displayMilliseconds);
};

const duration = 2 * 24 * 60 * 60 * 1000;の部分で、カウントダウンタイマーでカウントする日数や時間を設定します。

これだと、下記のような感じで、２日間のカウントダウンになります。

募集期間はあと、00日00時間00分 00秒 00で終了します

なお、このコードだと改めて表示させた場合には、カウントが元に戻ります。

その為、本来であれば、PHPなどを使って制御する必要があります。

ただ、今回は簡易的な仕組みのJavaScriptでローカルストレージに保存されている終了時刻をチェックするようにしました。

そのコードが下記となります。

カウントダウンタイマーのソース一式
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>カウントダウンタイマー</title>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap" rel="stylesheet">
<style>
.nya-timer-wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f5f5f5;
}

.nya-timer-container {
background-color: #000;
padding: 20px;
border-radius: 10px;
color: #FFFFFF;
font-family: 'Arial', sans-serif;
font-size: 18px;
text-align: center;
width: 700px;
}

.nya-timer {
font-family: 'Orbitron', sans-serif;
font-size: 22px;
color: #00FF00;
text-shadow: 0 0 10px #00FF00;
display: inline-block;
vertical-align: middle;
letter-spacing: 2px;
}

.nya-timer span {
display: inline-block;
width: 46px; /* 各数字の幅を固定 */
text-align: center;
}

.nya-message {
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="nya-timer-wrapper">
<div class="nya-timer-container">
<span class="nya-message">募集期間はあと、</span>
<span class="nya-timer">
<span id="nya-days">00</span>日<span id="nya-hours">00</span>時間
<span id="nya-minutes">00</span>分 <span id="nya-seconds">00</span>秒 
<span id="nya-milliseconds">00</span>
</span>
<span class="nya-message">で終了します</span>
</div>
</div>
<script>
function startCountdown(duration, displayDays, displayHours, displayMinutes, displaySeconds, displayMilliseconds) {
const startTime = Date.now();
const endTime = startTime + duration;

// ローカルストレージに終了時刻を保存
localStorage.setItem('nya-endTime', endTime);

const interval = setInterval(function () {
const now = Date.now();
const timeLeft = endTime - now;

if (timeLeft <= 0) {
clearInterval(interval);
document.querySelector('.nya-timer-container').textContent = "募集は終了しました";
return;
}

const days = Math.floor(timeLeft / (24 * 60 * 60 * 1000));
const hours = Math.floor((timeLeft % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000));
const minutes = Math.floor((timeLeft % (60 * 60 * 1000)) / (60 * 1000));
const seconds = Math.floor((timeLeft % (60 * 1000)) / 1000);
const milliseconds = Math.floor((timeLeft % 1000) / 10);

displayDays.textContent = days.toString().padStart(2, '0');
displayHours.textContent = hours.toString().padStart(2, '0');
displayMinutes.textContent = minutes.toString().padStart(2, '0');
displaySeconds.textContent = seconds.toString().padStart(2, '0');
displayMilliseconds.textContent = milliseconds.toString().padStart(2, '0');
}, 10);
}

window.onload = function () {
const displayDays = document.getElementById('nya-days');
const displayHours = document.getElementById('nya-hours');
const displayMinutes = document.getElementById('nya-minutes');
const displaySeconds = document.getElementById('nya-seconds');
const displayMilliseconds = document.getElementById('nya-milliseconds');

const storedEndTime = localStorage.getItem('nya-endTime');
const now = Date.now();

if (storedEndTime && now < storedEndTime) {
// ローカルストレージの終了時刻が現在時刻より未来の場合、カウントダウンを続行
const duration = storedEndTime - now;
startCountdown(duration, displayDays, displayHours, displayMinutes, displaySeconds, displayMilliseconds);
} else {
// ローカルストレージに終了時刻がない、または終了している場合は新しいカウントダウンを開始
const duration = 2 * 24 * 60 * 60 * 1000; // 2日間のカウントダウン
startCountdown(duration, displayDays, displayHours, displayMinutes, displaySeconds, displayMilliseconds);
}
};
</script>
</body>
</html>

デモサイトも用意したので、ご確認ください。

「カウントダウンタイマー」のデモ

これで、ブラウザを閉じた後でも、最初にカウントダウンタイマーが始動した時間から、カウントダウンされるようになりました。