HTMLとjavascriptで指定した時間・日時・曜日に画像や文字の表示・非表示を切り替える方法

みなさん、おはようございますこんにちはこんばんは！ハルです。
今回はHTMLとjavascriptで指定した時間・日時・曜日に画像や文字の表示・非表示を切り替える方法の記事です。
例えば、毎月5の付く日にポイント5倍の文字を表示したいとか、毎週土曜、日曜だけ開店時間を変更したいなどという時に使えます。
工夫次第では時間指定以外にも使用出来ると思いますので、紹介するコードを改変してみるのも面白いかもしれませんね。
そんな説明は良いからコードが欲しい！という方はデモ・配布用スニペットにダウンロード用のzipファイルを置いていますのでご自由にどーぞ！

もくじ

• コード
  • HTML
  • javascript
• デモ・配布用スニペット
• まとめ

コード

HTML

//月水金の当日0時からランチタイム終了まで表示させたい時の例
<p class="dtimer" data-eh="13" data-em="30" data-week="月水金">
  今日はランチ10%オフ（ランチタイムは11時から13時30分までとなります）
</p>

まずはHTMLからです。タグに「カスタムデータ属性」がある事に気付かれたと思います。
属性名は「data-〇〇」という形で〇〇の部分は自由に変更可能ですが、使える文字などに制限がありますのでご注意ください。
詳しくは下記のURLをご参照ください。

カスタムデータ属性の命名のルール
→HTMLElement.dataset-WebAPIインターフェイス|MDN

javascript

//カスタムデータ属性の値をまとめて取得
data = elem.dataset;

//個別に取得
week = data.week; HTMLファイルのタグで作成したカスタムデータ属性値を取得しています。

elem.style.display = 〇〇; スタイルを書き換えています。

//取得するHTMLエレメントをクラス名で指定しています。
const elem_all = document.querySelectorAll('.dtimer');

//取得したエレメントを分割して配列に格納しています。
const elems = Array.prototype.slice.call(elem_all, 0);

//取得したエレメントをforEachで順番に処理します。
elems.forEach((elem) => display(elem, ntime, nweek)); このコードはHTMLファイルの指定したオブジェクトを返します。HTMLからクラス名で検索して配列に格納後forEachで配列を回すという動作をしています。

setTimeout(displayAll, 1000); 再起処理です。1秒間隔で表示・非表示の判定をするように設定しています。

デモ・配布用スニペットファイル

デモページを作成しました。紹介したコードを実際に動かしてみたらこんな感じで動きます。
→デモページ

デモページのテスト用ファイルです。
解凍するとjsファイル・htmlファイル・画像2つが作成されます。
→デモファイル（CustomDataDemo_1.1.1.zip）

テスト用コードに機能を追加した配布用スニペットです。ユーザー設定用の変数などもまとめてありますのでこちらの方がお勧めです。
設定方法が記事で紹介した方法と若干異なりますのでご注意下さい。
解凍するとjsファイル・テキストファイル（説明書）が作成されます。
注意事項等も記載してありますので、ご使用前に説明書に必ず目を通して下さい。
→配布ファイル（displayTimer_1.2.1.zip）2022/03/21更新

まとめ

HTML5から追加されたカスタムデータ属性。アイディア次第でかなり便利な使い方が出来そうですね！
それでは今回はここまで。また次回更新時もお付き合い頂けるとうれしいです。
ありがとうございました！

公開年月日：2018年04月23日
更新年月日：2022年03月21日