最終更新日 1年 | 公開日: 20240905
ページ内のコンテンツで同じIDまたはクラスでdata-toggle-dateを使って設定できる。
.hide .showを入れ替えることで、表示非表示を変えられる（期限が来たら消えるか出すか選べる）
<script src=”https://code.jquery.com/jquery-3.6.0.min.js”></script>
<script>
$(document).ready(function(){
const currentDate = new Date();$(“.note”).each(function(){
const elementDateStr = $(this).data(“toggle-date”);
const [date, time] = elementDateStr.split(” “);
const [year, month, day] = date.split(“-“);
const [hour, minute, second] = time.split(“:”);
const elementDate = new Date(year, month-1, day, hour, minute, second);if(currentDate >= elementDate) {
$(this).hide();//
} else {
$(this).show();
}
});
});
</script>
<h1>未来過ぎる日付の方</h1>
Jquaryのライブラリを読み込んでおく必要がある
<div class=”note” data-toggle-date=”2054-09-05 15:45:00″>
<ul>
<li>2054/9/5 15:45:00まで出す</li>
<li>時間も秒単位で設定可</li>
</ul>
</div>
<h2>消える方</h2>
<div class=”note” data-toggle-date=”2024-09-05 15:40:00″>
<dl>
<dt>2024/9/5 15:40:00で消える</dt>
<dd>コード見ない限り表示されてないはず</dd>
</dl>