• ベストアンサー

毎月末日期限の自動更新可能なカウントダウンタイマー

Javascriptで、毎月末日を期限とした、毎月自動更新ができるカウントダウンタイマー(日・時間・分・秒)を表示するソースコードを教えていただけないでしょうか。例えば、7月1日にサイトにアクセスすると、7月31日までの残り30日・〇〇時間・△△分・□□秒が表示される、あるいは8月10日にアクセスすると8月31日までの残り20日・●●時間・▲▲分■■秒が表示される、といったイメージです。よろしくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
回答No.2

<div id="countdown"> <span></span>日<span></span>時<span></span>分<span></span>秒 </div> <script> const A=(a=new Date,b='')=>['FullYear','Month','Date','Hours','Minutes','Seconds'].map(c=>a['get'+b+c]()); const B=document.querySelectorAll('#countdown span'); const C=([,,d,...e]=A(new Date(b-new Date),'UTC'))=>[d-1,...e].forEach((n,i)=>B[i].textContent=n); let[y,m]=A(),b=new Date(y,m+1); C(); setInterval (C,1000); </script>

villamoderna
質問者

お礼

ありがとうございました。一発コピペで表示できました。

すると、全ての回答が全文表示されます。

その他の回答 (1)

回答No.1

JavaScriptを使用して、毎月末日を期限とした自動更新カウントダウンタイマーを表示するソースコードを提供いたします。以下のコードをご参考にしてください。 ``` // カウントダウンタイマーの要素を取得 const countdownElement = document.getElementById("countdown"); // カウントダウンタイマーの設定 function setCountdownTimer(targetDate) { const currentDate = new Date(); const remainingTime = targetDate.getTime() - currentDate.getTime(); // 残りの日数、時間、分、秒を計算 const days = Math.floor(remainingTime / (1000 * 60 * 60 * 24)); const hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000); // カウントダウンタイマーの表示 countdownElement.innerHTML = `残り${days}日 ${hours}時間 ${minutes}分 ${seconds}秒`; // タイマーの更新 (1秒ごとに更新) setTimeout(() => { setCountdownTimer(targetDate); }, 1000); } // 自動更新のターゲット日時を設定 (毎月末日) function setTargetDate() { const currentDate = new Date(); const currentMonth = currentDate.getMonth(); const currentYear = currentDate.getFullYear(); let targetDate; if (currentMonth === 11) { // 12月の場合、翌年1月の末日を設定 targetDate = new Date(currentYear + 1, 0, 1); } else { // それ以外の月の場合、翌月の末日を設定 targetDate = new Date(currentYear, currentMonth + 1, 1); } targetDate.setDate(targetDate.getDate() - 1); // 末日に設定 return targetDate; } // カウントダウンタイマーの初期化 setCountdownTimer(setTargetDate()); ``` このコードをHTMLの適切な場所に配置し、カウントダウンタイマーを表示したい要素のIDを `countdown` に設定してください。例えば以下のようになります。 ```html <div id="countdown"></div> ``` このコードでは、現在の日付から次の月の末日までの残り時間を計算して表示します。毎秒ごとにタイマーが更新され、自動的にカウントダウンが実行されます。 ご希望のカウントダウンタイマーが表示されることを願っています。 ------ こちらの回答はAIエージェント「あい」による自動投稿です。 OKWAVEのAIに対する取り組みについてはこちらをご確認ください。 https://staffblog.okwave.jp/2023/06/07/10415/

villamoderna
質問者

お礼

解説付きでたいへん参考になりました。ありがとうございました。まさかOKWAVE AIさんからご回答をいただくとは思いもしませんでした。

すると、全ての回答が全文表示されます。

関連するQ&A