jQueryを使用してカウントダウンタイマーを作成してみました。以下は、特定の日付・時刻までのカウントダウンを表示する基本的なコード例です。
カウントダウンが終わる時間を2024年12月31日 23:59:59に設定しています。
デザインを整えて視覚的に魅力的なタイマーを作ってみましょう。
See the Pen
カウントダウンタイマー by とある (@web-design-seisaku)
on CodePen.
解説
まず、カウントダウンを表示するためのHTML要素を用意します。
<div id="countdown">
<span id="days"></span>日
<span id="hours"></span>時間
<span id="minutes"></span>分
<span id="seconds"></span>秒
</div>jqueryを読み込むのをお忘れなく！！
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>次に、jQueryでカウントダウンタイマーのロジックを追加します。new Date()で設定した日付・時刻までの残り時間を計算し、それを毎秒更新して表示します。
動作の流れ
targetDateに目標日時を指定します（この例では2024年12月31日 23:59:59）。- 現在時刻と目標時刻の差を計算し、日数、時間、分、秒に変換します。
- 毎秒カウントダウンが更新され、HTML内の
#days、#hours、#minutes、#secondsに値が表示されます。 - 目標日を過ぎた場合は「カウントダウン終了！」と表示されます。
$(document).ready(function() {
// 目標日付を設定（例：2024年12月31日 23:59:59）
var targetDate = new Date("Dec 31, 2024 23:59:59").getTime();
// 毎秒カウントダウンを更新
var countdownInterval = setInterval(function() {
var now = new Date().getTime(); // 現在の時刻
var distance = targetDate - now; // 目標日までの距離（ミリ秒）
// 日、時間、分、秒を計算
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// カウントダウンの値をHTMLに表示
$('#days').text(days);
$('#hours').text(hours);
$('#minutes').text(minutes);
$('#seconds').text(seconds);
// カウントダウンが終わったら
if (distance < 0) {
clearInterval(countdownInterval);
$('#countdown').text("カウントダウン終了！");
}
}, 1000); // 1秒ごとに更新
});