こんにちは、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要素に指定されている
「js-time_limited」クラスと、
「data-time_limit=”2020/12/25 12:00:00″」
「data-disappear_time=”2020/12/26 00:00:00″」の二つの属性値です。
前者のクラスは時限処理の対象にする要素の目印ですので、
処理を行いたい全ての要素に付与してください。
後者の二つのデータ属性は、
それぞれ対象を表示する開始と
終わりの期限を設定する役割を持ちます。
サンプルの例ですと、
2020年12月25日の正午0時から
日付が変わる瞬間の2020年12月26日0時丁度までの間のみ、
imgタグに設定したURLの画像が表示されるというわけですね。
CSSコード
.js-time_limited{ display: none; } .js-time_limited_fire{ display: block; }
要素の表示/非表示は
CSSでコントロールします。
CSSの内容を書き換えることで
表示表示以外にも要素の背景画像の変更や
文字のスタイリングなどいろいろな応用が可能ですので
知識のある方はぜひトライしてみてください。
javascriptコード
var myClass = document.getElementsByClassName("js-time_limited"); for (var i = 0; i < myClass.length; i++){ var appearTime = myClass[i].getAttribute("data-appear_time"); var disappearTime = myClass[i].getAttribute("data-disappear_time"); var threshould_start = Date.parse(appearTime); var threshould_end = Date.parse(disappearTime); var current = new Date(); if (threshould_start < current && threshould_end > current) { myClass[i].classList.add("js-time_limited_fire"); } else { // 同じ時間、もしくはそれ以前ならば myClass[i].classList.remove("js-time_limited_fire"); } }
javascriptコードです。
現在時刻とdata属性の時刻設定を比較し、
設定した表示期限時刻内であれば
対象にdisplayをnoneからblockに変更するための
js-time_limited_fireクラスをするという処理で
要素の表示/非表示をコントロールしています。
最初はCSSを通さず、javascriptで
直接style属性を変更して表示/非表示を
切り替えていましたが、柔軟性や
更新の利便性を考慮した結果今の仕様に落ち着きました。
$(".js-time_limited").each(function(){ var appearTime = $(this).data("appear_time"); var disappearTime = $(this).data("disappear_time"); var threshould_start = Date.parse(appearTime); var threshould_end = Date.parse(disappearTime); // 現在の日時をもつDateオブジェクトを作成 var current = new Date(); if (threshould_start < current && threshould_end > current) { $(this).addClass("js-time_limited_fire"); } else { // 同じ時間、もしくはそれ以前ならば $(this).removeClass("js-time_limited_fire"); } });
あまり大きな差はありませんが
コードの見た目が多少すっきりしている
jQuery版もご用意してみました。
(処理内容は同一です)
jQueryが利用可能な環境下であれば
こちらを利用してください。
おわりに
このスクリプトはもともと、
ネットショップを運営しているお客様から
毎回バナーの付け外しが面倒なので
自動でバナーを非表示にする方法がないかという
ご相談を受けたことがきっかけで書いたものでした。
自分も面倒くさがりな方なのでよくわかるのですが、
そういう面倒な作業はできるだけプログラムに任せて
人間側はもっと人間にしかできない仕事に集中したいものですね。
コメント