※当サイトにはプロモーションが含まれています。
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;の部分で、カウントダウンタイマーでカウントする日数や時間を設定します。
これだと、下記のような感じで、2日間のカウントダウンになります。
なお、このコードだと改めて表示させた場合には、カウントが元に戻ります。
その為、本来であれば、PHPなどを使って制御する必要があります。
ただ、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>
デモサイトも用意したので、ご確認ください。
これで、ブラウザを閉じた後でも、最初にカウントダウンタイマーが始動した時間から、カウントダウンされるようになりました。