<JS>営業時間と営業時間外で表示テキストを変更する条件分岐実装方法

前提・実現したいこと

Wordpressにて、営業時間には「営業中」営業時間外には「営業時間外」と
表示テキストを切り替えるプログラムを作りたい

営業日: 月,火,木,金,土
営業時間: 10:00〜12:00 , 13:00〜20:00
営業時間外: 水,日,祝　と営業時間以外

発生している問題

以下2つの方法を組み合わせれば実現ができそうなのですが、
実装後に表示状態をテストし確認する訳にもいかないので、
是非お力をお借りできればと考えております。

曜日・時間ごとに表示を切り替える
https://peacepopo.net/blog-entry-151.html

祝日を取得する
https://iwb.jp/javascript-new-date-is-holiday-check/

試したこと

こちらのコードに祝日の判定を入れるにはどうすればよろしいでしょうか？

HTML
1<body onload="Settoday();">
2  
3<div id="Sun" style="display:none;">
4<p>電話受付時間外</p>
5</div>
6<div id="Mon" style="display:none;">
7<p>電話受付中</p>
8</div>
9<div id="Tue" style="display:none;">
10<p>電話受付中</p>
11</div>
12<div id="Wed" style="display:none;">
13<p>電話受付時間外</p>
14</div>
15<div id="Thu" style="display:none;">
16<p>電話受付中</p>
17</div>
18<div id="Fri" style="display:none;">
19<p>電話受付中</p>
20</div>
21<div id="Sat" style="display:none;">
22<p>電話受付中</p>
23</div>
24</body>

Javascript
1<script>
2function Settoday(){
3  var today = new Date() ;
4  var nowtime= ("0"+today.getHours()).slice(-2) +":"+("0"+today.getMinutes()).slice(-2);
5  var weekday = [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ] ;   
6  //リスト1
7  var startlist1 = [ "", "10:00", "10:00", "", "10:00", "10:00", "10:00" ]; 
8  var endlist1 = [ "", "12:00", "12:00", "", "12:00", "12:00", "12:00" ];
9   
10  //リスト2
11  var startlist2 = [ "", "13:00", "13:00", "", "13:00", "13:00", "13:00" ]; 
12  var endlist2 = [ "", "20:00", "20:00", "", "20:00", "20:00", "20:00" ]; 
13   
14  var starttime="00:00";
15  var endtime="24:00";
16   
17  //リスト1のチェック
18  if(startlist1[today.getDay()] != ""){
19    starttime=startlist1[today.getDay()];
20  }
21  if(endlist1[today.getDay()] != ""){
22    endtime=endlist1[today.getDay()];
23  }
24  if ( nowtime >= starttime&& nowtime <= endtime){
25    document.getElementById(weekday[today.getDay()]).style.display="block";
26  }
27 
28  starttime="00:00";
29  endtime="24:00";
30  //リスト2のチェック
31  if(startlist2[today.getDay()] != ""){
32    starttime=startlist2[today.getDay()];
33  }
34  if(endlist2[today.getDay()] != ""){
35    endtime=endlist2[today.getDay()];
36  }
37  if ( nowtime >= starttime&& nowtime <= endtime){
38    document.getElementById(weekday[today.getDay()]).style.display="block";
39  }
40}
41</script>

CHERRY

2019/05/09 23:50 編集

祝日を判定する関数はありませんので、祝日のデータを用意する必要がありますが、祝日のデータはどのように管理していますか？

m.ts10806

2019/05/10 00:19

>Javascript初心者です「初心者」自体は質問要件ではありませんので、「初心者アイコン」を質問につけてください。

行動規範の内容に同意します

回答2件

ベストアンサー

実装後に表示状態をテストし確認する訳にもいかないので、

PHPでもJavaScriptでもローカルで動作確認できますので（PHPは簡単にするならXAMPP入れるなどローカルでサーバー立てる必要がありますが）
参考記事をもとにローカルでミニマムプログラムを作って動作確認すれば良いのではないでしょうか。
（ここで回答もらっても結局実装確認は必要ですし、本当にできているかどうかは回答だけではわかりません）

ただ、私個人の意見としてはブラウザ開発ツールから如何様にも改ざんして表示を操作できる
HTMLやCSS、JavaScriptといったクライアント側の言語で切り替えの処理を行うよりも
japanese-holidayのようなプラグインのあるPHP側でHTMLの表示の制御をされたほうが良いかと。
※適宜composerで祝日データを更新する必要がありますが
提示のリンクに「内閣府から祝日のデータをダウンロード」というのがありますが、そのCSVもPHPで読み取ったほうが確実です（こちらも適宜CSVを更新する必要がありますね）

投稿2019/05/10 00:20

編集2019/05/10 00:37

m.ts10806

総合スコア80854