指定した時間までのカウントダウンをJavaScriptで作る機会があったのでメモ。
サンプルコード
HTML
#countdown-unitの中にカウントダウンの数字を入れます。
1 | <div id="countdown-unit"></div> |
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | // 期限の設定var gYear = 2020, // 年 gMonth = 7, // 月 gDay = 24, // 日 gHour = 0, // 時 gMinute = 0, // 分 gSecond = 0; // 秒var goal = new Date(gYear, gMonth-1, gDay, gHour, gMinute, gSecond);// 使用する変数の宣言var currentTime, period, cDay, cHour, cMinute, cSecond, insert = "";// カウントダウンの処理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)); // 時間を取得 cHour = Math.floor(period / (1000 * 60 * 60)); period -= (cHour * (1000 * 60 * 60)); // 分を取得 cMinute = Math.floor(period / (1000 * 60)); period -= (cMinute * (1000 * 60)); // 秒を取得 cSecond = Math.floor(period / (1000)); period -= (cSecond * (1000)); // フレーム cFlame = Math.floor(period / (10)); // 残り日数の書き換え insert = ""; insert += '<span class="d">' + cDay + '</span>' + "日"; insert += '<span class="h">' + cHour + '</span>' + ":"; insert += '<span class="m">' + cMinute + '</span>' + ":"; insert += '<span class="s">' + cSecond + '</span>' + ":"; insert += '<span class="f">' + cFlame + '</span>' + ""; document.getElementById('countdown-unit').innerHTML = insert; // カウントダウンの処理を再実行 setTimeout(countdown, 10); // 期限を過ぎた時 } else { document.getElementById('countdown-unit').innerHTML = 'Time Up'; }}// 処理の実行countdown(); |
あまりこういった処理を作ったことがなかったのですが、カウントダウンだけではなくて
年が明けたらサイトのバナーを差し替えたい、みたいなのとか色々使いどころがありそうに思います。
コメントが承認されるまで時間がかかります。