前提・実現したいこと
指定した日時までカウントダウンする処理を画像で表示するJSを実装しました。
参考サイト
http://cly7796.net/wp/javascript/countdown-image-timer/
下記のソースで1つはカウンターが設置されるのですが、別の日付をもう一つカウンターを表示させたいと思っています。
どのようにしたらもう一つ別の日付でカウンターが作れるでしょうか?
追記
日付の違う2つのイベントがあり、HPを開いたときに、それぞれのイベントまで●日というカウンターを出したいと思います。
時間・秒数は必要なく日付のみ表示させたいと思います。
Javascript
// 期限の設定 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 numHeight = 22; // 使用する変数 var currentTime, period, cDay, cDayHundred, cDayTen, cDayOne, cHour, cHourTen, cHourOne, cMinute, cMinuteTen, cMinuteOne, cSecond, cSecondTen, cSecondOne, cFlame, cFlameTen, cFlameOne, insert = ""; // カウント用画像の指定 var dayThousand = document.getElementById('day-thousand'), dayHundred = document.getElementById('day-hundred'), dayTen = document.getElementById('day-ten'), dayOne = document.getElementById('day-one'), hourTen = document.getElementById('hour-ten'), hourOne = document.getElementById('hour-one'), minuteTen = document.getElementById('minute-ten'), minuteOne = document.getElementById('minute-one'), secondTen = document.getElementById('second-ten'), secondOne = document.getElementById('second-one'), flameTen = document.getElementById('flame-ten'), flameOne = document.getElementById('flame-one'); // カウントダウンの処理 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)); // 桁数を4桁に揃える cDay = String(cDay); while(cDay.length < 4) { cDay = '0' + cDay; } // 画像の切り替え dayThousand.style.top = (- cDay.substr(0, 1) * numHeight) + 'px'; dayHundred.style.top = (- cDay.substr(1, 1) * numHeight) + 'px'; dayTen.style.top = (- cDay.substr(2, 1) * numHeight) + 'px'; dayOne.style.top = (- cDay.substr(3, 1) * numHeight) + 'px'; // 時間を取得 cHour = Math.floor(period / (1000 * 60 * 60)); period -= (cHour * (1000 * 60 * 60)); // 桁数を2桁に揃える cHour = String(cHour); while(cHour.length < 2) { cHour = '0' + cHour; } // 画像の切り替え hourTen.style.top = (- cHour.substr(0, 1) * numHeight) + 'px'; hourOne.style.top = (- cHour.substr(1, 1) * numHeight) + 'px'; // 分を取得 cMinute = Math.floor(period / (1000 * 60)); period -= (cMinute * (1000 * 60)); // 桁数を2桁に揃える cMinute = String(cMinute); while(cMinute.length < 2) { cMinute = '0' + cMinute; } // 画像の切り替え minuteTen.style.top = (- cMinute.substr(0, 1) * numHeight) + 'px'; minuteOne.style.top = (- cMinute.substr(1, 1) * numHeight) + 'px'; // 秒を取得 cSecond = Math.floor(period / (1000)); period -= (cSecond * (1000)); // 桁数を2桁に揃える cSecond = String(cSecond); while(cSecond.length < 2) { cSecond = '0' + cSecond; } // 画像の切り替え secondTen.style.top = (- cSecond.substr(0, 1) * numHeight) + 'px'; secondOne.style.top = (- cSecond.substr(1, 1) * numHeight) + 'px'; // フレーム cFlame = Math.floor(period / (10)); // 桁数を2桁に揃える cFlame = String(cFlame); while(cFlame.length < 2) { cFlame = '0' + cFlame; } // 画像の切り替え flameTen.style.top = (- cFlame.substr(0, 1) * numHeight) + 'px'; flameOne.style.top = (- cFlame.substr(1, 1) * numHeight) + 'px'; // カウントダウンの処理を再実行 setTimeout(countdown, 10); // 期限を過ぎた時 } else { } } // 処理の実行 countdown();
HTML
<div id="countdown-unit"> <div><img src="num.gif" width="20" height="220" id="day-thousand"></div> <div><img src="num.gif" width="20" height="220" id="day-hundred"></div> <div><img src="num.gif" width="20" height="220" id="day-ten"></div> <div><img src="num.gif" width="20" height="220" id="day-one"></div> <div><img src="day.gif" width="20" height="22"></div> <div><img src="num.gif" width="20" height="220" id="hour-ten"></div> <div><img src="num.gif" width="20" height="220" id="hour-one"></div> <div><img src="time.gif" width="20" height="22"></div> <div><img src="num.gif" width="20" height="220" id="minute-ten"></div> <div><img src="num.gif" width="20" height="220" id="minute-one"></div> <div><img src="time.gif" width="20" height="22"></div> <div><img src="num.gif" width="20" height="220" id="second-ten"></div> <div><img src="num.gif" width="20" height="220" id="second-one"></div> <div><img src="time.gif" width="20" height="22"></div> <div><img src="num.gif" width="20" height="220" id="flame-ten"></div> <div><img src="num.gif" width="20" height="220" id="flame-one"></div> </div>
CSS
#countdown-unit div { position: relative; float: left; width: 20px; height: 22px; overflow: hidden; } #countdown-unit div img { position: absolute; top: 0; left: 0; }
htmlのほうもコードブロック ``` で囲ってJavaScriptのコードを同じようにしていただけますか?
やりたいこととしては「いきなり同時にカウントダウンを開始」でしょうか。それとも何かしらボタンなど押して押したほうだけ・指定したほうだけをカウントダウンでしょうか。もう少し用途(要件・仕様)を明確にしていただけますか?
ありがとうございます。2つのイベントまでの日数までのカウントなので、時間・秒数は必要なく、あと●●日という表示があればよい仕様です。ボタンを押してカウントされるのではなく、ページを開いたときに別々の日付のイベントがそれぞれあと●日という風にしたいと思います。
質問は編集できるので適宜(最初のコードブロックも含めて)追記・編集してください。
ヒント回答のみだと一言ですがそれではなく具体的にコードと解説も必要ですか?
お返事ありがとうございます。できれば解説をいただけるとありがたいです。
了解です。ただ、本当に全てそのままコピペで動くコードを提示してしまうと質問者さんのためにもなりませんし、ヒント回答にコードと解説をつけるような形で提示しようと思います。(ロジック部分はある程度使いまわせるかなあと)
ありがとうございます。しっかり勉強いたします!
あとすみません。回答はしているのですが、「初心者」は要件とも違いますし、質問編集画面から「初心者アイコン」がつけられるので、それだけにとどめていただけますか?