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などを使って制御する必要があります。

ただ、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>

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

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

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

楽天市場の検索結果

1冊ですべて身につくJavaScript入門講座 [ Mana ]

2,794円(税込)【送料込】

楽天ブックス

Mana SBクリエイティブイッサツデスベテミニツクジャバスクリプトニュウモンコウザマナ発行年月：2023年03月02日ページ数：344p サイズ：単行本 ISBN：9784815615758 Mana（マナ）日本で2年間グラフィックデザイナーとして働いた後、カナダ・バンクーバーにあるWeb制作の学校を卒業。カナダやオーストラリア

改訂3版JavaScript本格入門 [ 山田祥寛 ]

3,520円(税込)【送料込】

楽天ブックス

山田祥寛技術評論社カイテイサンハンジャバスクリプトホンカクニュウモンモダンスタイルニヨルキソカラゲンバデノオウヨウマデヤマダヨシヒロ発行年月：2023年02月13日予約締切日：2022年12月14日ページ数：624p サイズ：単行本 ISBN：9784297132880 1　イントロダクション／2　基本的な書き方を身につける

JavaScript 第7版 [ David Flanagan ]

5,060円(税込)【送料込】

楽天ブックス

David Flanagan 村上列オライリー・ジャパンジャバスクリプトダイナナハンデイビッドフラナガンムラカミレツ発行年月：2021年12月02日予約締切日：2021年10月07日ページ数：784p サイズ：単行本 ISBN：9784873119700 原書第7版フラナガン，デイビッド（Flanagan,David）

JavaScript／DavidFlanagan／村上列【3000円以上送料無料

5,060円(税込)【送料込】

bookfan 1号店楽天市場店

著者DavidFlanagan(著) 村上列(訳)出版社オライリー・ジャパン発売日2021年11月ISBN9784873119700ページ数749PキーワードじやヴあすくりぷとJAVASCRIPT ジヤヴアスクリプトJAVASCRIPT ふらながんでびつど FLAN フラナガンデビツド FLAN9784873119700内容紹介サイ本

スラスラわかるJavaScript 新版 [ 桜庭洋之 ]

2,640円(税込)【送料込】

楽天ブックス

桜庭洋之望月幸太郎翔泳社スラスラワカルジャバスクリプトシンバンサクラバヒロユキモチヅキコウタロウ発行年月：2022年07月13日予約締切日：2022年05月20日ページ数：384p サイズ：単行本 ISBN：9784798173269 桜庭洋之（サクラバヒロユキ）中学生でインターネットに出会いプログラミングにはま