羊たちの溜まり場

◆擬似的な予約投稿システム(HTML＋JavaScript)

非表示にしておいた要素を時間が来たら表示するしくみ
HTML内の,JS内の// ……は説明用のコメントです

＊ HTML ＊
 <p id="content1" style="display:none;">コンテンツ１</p> <p id="content2" style="display:none;">コンテンツ２</p>  <script src="sample1.js" type="text/javascript"></script>   

＊ JS(sample1.js) ＊
const today = new Date(); // 定数todayに現在の日時を取得して格納 const appointment1 = new Date(2022,7,8,17,00,00); // 定数appointment1に予約日時を設定して格納 // Date(2022,7,8,17,00,00) = (2022年 8月8日 17時00分00秒) // 注：DateのMonthの戻り値は0基点になっているため1月=0,2月=1となる const appointment2 = new Date(2022,7,10,17,00,00); // 定数appointment2に予約日時を設定して格納 function scheduledPost(){ if (today >= appointment1){ document.getElementById("content1").style.display = 'block'; // 今の日時がappointment1で設定した日時以降なら、id名content1の要素を表示状態に } if (today >= appointment2){ document.getElementById("content2").style.display = 'block'; // 今の日時がappointment2で設定した日時以降なら、id名content2の要素を表示状態に } } scheduledPost(); // 関数scheduledPost()を実行

2022.08.11.公開

＞＞ TOP