はてなブックマーク

こんにちは、daimaです。 本日は任意で設定した時刻によって 画像の表示/非表示を切り替えることができる表示期限付きバナーを 数行のjavascriptコードで実現する方法をご紹介します。 主な用途としては、 一度に複数の対象への期限設定が可能であり、 かつ利用方法も非常にシンプルとなっておりますので、 バナーの付け替え作業が頻出する ネットショップの工数削減などに特に力を発揮するかと思います。 デモとソースコード HTMLコード <div class="js-time_limited" data-appear_time="2020/12/25 15:45:00" data-disappear_time="2020/12/28 17:26:00"> <img src="{画像URL}" alt=""> </div> まずはHTMLコードです。 ここでのポイントはdiv要素に指定されている