JavaScriptでタイマーセットして、コンテンツの表示・非表示を制御


2019年4月22日

皆さんこんにちは!

花粉症が治らないせいなのか、毎晩定期的に起きてそのまま眠れない老人末吉です。

GWに備えたコンテンツの表示・非表示スクリプト

さて、もういくつねるとGWがやってきます。
今回のGWは10連休もあり、いくつかの企業さんは実際に10連休取られることもあるでしょう。

そんなときに困ることがひとつ、GW中の更新です。

きっと多くのウェブ担当者さんは以下のことをお考えでしょう。
GW中に終了するサービスがあるけど、更新のために休日出勤したくない・・・

きっと多くの経営者さんは以下のことをお考えでしょう。
たった1時間の業務のために従業員を出社させ、手当を払わなければいけないのか・・・

ならば、もうJavaScriptを使用して自動的にコンテンツの表示・非表示を制御しましょう。

JavaScript

HTML

コードレビュー

はい荒っぽいコードですが、見ていきましょう。

まずはHTMLの中から js-timer というclassを持ったエレメントを拾い出し、
forEachでひとつひとつまわします。

now に現在の時刻、startにHTML要素に書かれた表示開始日(data-start)、endにHTML要素に書かれた表示終了日(data-end)をしまいます。

そして flag に false をセットしておきます。

また、checkerStart は”今”が表示開始日以降か判定し、そうであればtrueを返します。そうでなければfalseです。
checkerEndは”今”が表示終了日以前か判定し、そうであればtrueを返します。そうでなければfalseです。

さて、ここからが判定処理です。

表示開始日と表示終了日、どちらもセットされていれば一個目のifが走ります。

表示開始日のみ、あるいは表示終了日のみであればその後の処理が走ります。

どれもそれぞれ、先ほどの無名関数checkerStartとcheckerEndが走り判定がtrueであれば、flagをtrueに変更します。

そして・・・

flagがfalseであるならば、その要素に display: none; を付与します。
trueであるならば、表示してよい期間内ということなので何もしません。

まとめ

もちろんこの仕組みは逆にしてしまってもよいです。
最初にdisplay: none;になってる要素を検出し、表示期間内であれば表示するということもOKです。

ただし、その場合はその要素が display: float; や display: block; でありたかった場合困ります。
そのため、.is-hide { display: none !important; } など非表示にするutility classを用意し、表示期間内であればis-hideを取り除くといった処理にしましょう。

 

本記事に書いたスクリプトはES5では動きませんので、babel等でトランスパイルして使用してください!

 

さて、これにてGWを満喫できるようになったGWの担当者さん、よいGWを!

Share Button