JavaScriptで曜日ごとに表示内容を変える方法

公開日：2014/07/19 最終更新日：2022/08/27

javascript 曜日

ショップによっては毎週土曜日はセール日などといったイベントを定期的に開催したりしているのではないでしょうか。
先日書いた記事

ネットショップ運営の気になる備忘録

CSS[display:none;]知っていると意外と便利!!要素の表示・非表示の切り替えが簡単...

表示、非表示を簡単に切り替える方法を紹介しました。
先日の記事と関連する内容になりますがjavascriptで曜日ごとに表示を切り替える方法、曜日と時間帯で表示を切り替える方法を紹介したいと思います。

javascriptで曜日によって表示する内容を切り替える

毎週金曜日は、セールの日とか曜日ごとに定期的にイベントを開催しているショップも多いのではないでしょうか。

そんな定期的にイベントを開催する際にページの表示内容をイベント開催時の表示、開催前の表示、開催後の表示等、曜日によって表示する内容を手入力で書き換えているショップさんには便利な方法かと思います。

曜日ごとのサンプルソース

サンプルソース色々非表示

<script>
function Settoday(){
  var today = new Date() ;
  var weekday = [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ] ;  
  document.getElementById(weekday[today.getDay()]).style.display="block";
}
</script>
 
 
<body onload="Settoday();">
 
<div id="Sun" style="display:none;">
  日曜日に表示する内容
  <img src="画像URL">
</div>
<div id="Mon" style="display:none;">
  月曜日に表示する内容
  <img src="画像URL">
</div>
<div id="Tue" style="display:none;">
  火曜日に表示する内容
  <img src="画像URL">
</div>
<div id="Wed" style="display:none;">
  水曜日に表示する内容
  <img src="画像URL">
</div>
<div id="Thu" style="display:none;">
  木曜日に表示する内容
  <img src="画像URL">
</div>
<div id="Fri" style="display:none;">
  金曜日に表示する内容
  <img src="画像URL">
</div>
<div id="Sat" style="display:none;">
  土曜日に表示する内容
  <img src="画像URL">
</div>
</body>

各曜日ごとの＜div id=”曜日”＞＜/div＞を予め作成しておきます。
このサンプルでは＜div＞＜/div＞内の記述は文字と画像だけと短めになっていますが、実際にはもっと長くなるかと思います。各曜日に表示したい内容を細かく作り込むことも可能です。

そして、すべての曜日に対してstyle=”display:none;”として、非表示の状態にしてます。
＜body onload=”Settoday();”＞としているのが、読み込み時に定義したjavascriptを呼び出しています。
javascriptの内容としては、ページを読み込んだ時点の日時を取得して曜日を求めています。そして求めた曜日からjavascriptで、どの曜日の＜div＞を表示するかを制御をしています。

イベント開催の曜日であれば本日、○○イベントです・・・
開催前の曜日であれば、明日は○○イベント・・・
それ以外の曜日は、毎週○曜日は○○イベントですとか、商品のバナーを表示するなどイベントとは関係ない内容・・・としても良いかもしれません。

曜日別表示切り替えサンプル

この記事を見ている現在の曜日によって表示する内容が切り替わっているかと思います。

曜日と時間帯を組み合わせて表示を切り替えるjavascript

さきほどのサンプルは、曜日のみを指定する方法でしたが、時間帯も指定する方法も紹介しておこうかと思います。
javascript部分のみ

<script>
function Settoday(){
  var today = new Date() ;
  var nowtime= ("0"+today.getHours()).slice(-2) +":"+("0"+today.getMinutes()).slice(-2);
  var weekday = [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ] ;
  var startlist = [ "", "10:00", "", "22:00", "", "", "19:00" ]; 
  var endlist = [ "", "16:00", "", "", "", "", "21:00" ];
 
  var starttime="00:00";
  var endtime="24:00";
 
  if(startlist [today.getDay()] != ""){
    starttime=startlist [today.getDay()];
  }
  if(endlist [today.getDay()] != ""){
    endtime=endlist [today.getDay()];
  }
  if ( nowtime >= starttime && nowtime <= endtime){
    document.getElementById(weekday[today.getDay()]).style.display="block";
  }
}
</script>

html部分は省略しています。
var startlist = [ “”, “10:00”, “”, “22:00”, “”, “”, “19:00” ];
var endlist = [ “”, “16:00”, “”, “”, “”, “”, “21:00” ];
の部分で表示したい時間帯を設定します。
startlistが各曜日での開始時間、endlistが各曜日での終了時間を設定をします。
リスト内の並びとしては日、月、火、水、木、金、土となっています。
↑のリストでの設定は
月曜日は10:00から16:00に表示、水曜日は22:00以降に表示、土曜日は19:00から21:00に表示です。時間を何も指定していない場合は、その曜日の内容は終日表示されます。

1日の中で2回に分けて時間帯を指定する方法

H27.7.2追記しました
コメントにて
＞日曜　00:00～24:00
＞月曜　00:00～06:00　20:00～24:00
＞火曜　00:00～06:00　20:00～24:00
＞水曜　00:00～06:00　20:00～24:00
＞木曜　00:00～06:00　20:00～24:00
＞金曜　00:00～06:00　20:00～24:00
＞土曜　00:00～24:00
＞1日の中で2回に分けて時間帯を指定することなどは可能なのでしょうか？
という質問を頂きましたので、紹介したいと思います。

さきほどの1つの時間帯のソースをベースに改良してみます。

<script>
function Settoday(){
  var today = new Date() ;
  var nowtime= ("0"+today.getHours()).slice(-2) +":"+("0"+today.getMinutes()).slice(-2);
  var weekday = [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ] ;	
  //リスト1
  var startlist1 = [ "", "", "", "", "", "", "" ]; 
  var endlist1 = [ "", "06:00", "06:00", "06:00", "06:00", "06:00", "" ];
  
  //リスト2
  var startlist2 = [ "", "20:00", "20:00", "20:00", "20:00", "20:00", "" ]; 
  var endlist2 = [ "", "", "", "", "", "", "" ];
  
  var starttime="00:00";
  var endtime="24:00";
  
  //リスト1のチェック
  if(startlist1[today.getDay()] != ""){
    starttime=startlist1[today.getDay()];
  }
  if(endlist1[today.getDay()] != ""){
    endtime=endlist1[today.getDay()];
  }
  if ( nowtime >= starttime&& nowtime <= endtime){
    document.getElementById(weekday[today.getDay()]).style.display="block";
  }

  starttime="00:00";
  endtime="24:00";
  //リスト2のチェック
  if(startlist2[today.getDay()] != ""){
    starttime=startlist2[today.getDay()];
  }
  if(endlist2[today.getDay()] != ""){
    endtime=endlist2[today.getDay()];
  }
  if ( nowtime >= starttime&& nowtime <= endtime){
    document.getElementById(weekday[today.getDay()]).style.display="block";
  }
}
</script>

時間帯指定をするリストを2つに増やしました。
1つ目のリスト startlist1 と endlist1
var startlist1 = [ “”, “”, “”, “”, “”, “”, “” ];
var endlist1 = [ “”, “06:00”, “06:00”, “06:00”, “06:00”, “06:00”, “” ];

2つ目のリスト startlist2 と endlist2
var startlist2 = [ “”, “20:00”, “20:00”, “20:00”, “20:00”, “20:00”, “” ];
var endlist2 = [ “”, “”, “”, “”, “”, “”, “” ];

それぞれのリストで時間を設定します。

次に、表示するかのチェックをする部分に1つ目のチェックに加えて2つ目のチェックする記述を追加します。

これで、1日の中で時間帯を2つ指定することが出来ます。

時間の指定の際の注意点としては、00:00形式で指定するところです。
朝の９時から指定する場合は、9:00 ではなく、09:00とする必要があります。
もうひと手間かけるとしたら、時間帯を設定している曜日で表示時間外に表示する内容を設定出来てないところですかね。
もし、要望あれば追記しようかと思います。

複数箇所にて表示・非表示を設定する場合

H27.11.18 追記しました
コメント欄にて同一ページで複数箇所で設置したら最初の1つしか表示されなかったと頂きましたので、複数箇所への対応について記述します。上で紹介しているサンプルはhtmlの記述部分はid属性にid=”Sun”のように曜日ごとのid属性を割り当てています。javascript上ではidがSunのhtml要素を表示状態にしてね。といった命令をしています。

このid属性についてですが、細かくは書きませんが1ページ内で1つの要素に対しては1つのidを指定します。複数存在させてはいけません。複数指定する場合は、classを使います。また、html部分をクラスを使った記述に変更するのであれば、javascriptもそれに合わせて変更する必要がありますので、サンプルソースを載せておきます。

<script>
function Settoday(){
	var today = new Date() ;
	var nowtime= ("0"+today.getHours()).slice(-2) +":"+("0"+today.getMinutes()).slice(-2);
	var weekday = [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ] ;	
	var starttime = [ "", "23:00", "20:00", "", "", "", "" ];	
	var endtime = [ "", "23:59", "22:00", "", "", "", "" ];
	
	var start="00:00";
	var end="24:00";
	
	if(starttime[today.getDay()] != ""){
		start=starttime[today.getDay()];
	}
	if(endtime[today.getDay()] != ""){
		end=endtime[today.getDay()];
	}
	
	if ( nowtime >= start && nowtime <= end ){ 
		var classlist = document.getElementsByClassName(weekday[today.getDay()]);
		for(var i=0,l=classlist.length; l>i; i++){
			classlist[i].style.display="block";
		}
	}
}
</script>

<body onload="Settoday();">

1カ所目------------------------------------
<div class="Sun" style="display:none;">
  日曜日に表示する内容
</div>
<div class="Mon" style="display:none;">
  月曜日に表示する内容
</div>
<div class="Tue" style="display:none;">
  火曜日に表示する内容
</div>
<div class="Wed" style="display:none;">
  水曜日に表示する内容
</div>
<div class="Thu" style="display:none;">
  木曜日に表示する内容
</div>
<div class="Fri" style="display:none;">
  金曜日に表示する内容
</div>
<div class="Sat" style="display:none;">
  土曜日に表示する内容
</div>

・
・
・

2カ所目------------------------------------
<div class="Sun" style="display:none;">
  日曜日に表示する内容
</div>
<div class="Mon" style="display:none;">
  月曜日に表示する内容
</div>
<div class="Tue" style="display:none;">
  火曜日に表示する内容
</div>
<div class="Wed" style="display:none;">
  水曜日に表示する内容
</div>
<div class="Thu" style="display:none;">
  木曜日に表示する内容
</div>
<div class="Fri" style="display:none;">
  金曜日に表示する内容
</div>
<div class="Sat" style="display:none;">
  土曜日に表示する内容
</div>

</body>

javascript部分の20行目から23行目を修正しました。
20行目でクラスの要素を取得しています。複数あることが前提で対象曜日の要素を取得しています。ページ内にclass=”Fri”の要素が3つあったとすると3個分の要素をリストとして取得します。

21行目 for(var i=0,l=classlist.length; l>i; i++){ の部分は繰り返し処理の開始部分です。何回繰り返すのかといったことを書いていますが、ここでは1つ前で取得した「リストの件数分繰り返してね」という意味です。

22行目繰り返し処理される内容を記述しています。リスト1つ目を表示する、リスト2つ目を表示する、リスト3つ目を表示するといった処理内容です。

23行目 } 繰り返しの終わり部分

また、htmlの記述もid=”Fri”といったid属性での指定ではなく、class=”Fri”と変更しています。これでページ内の表示死体箇所に複数箇所設定することができます。

このサンプルソースでは同じclassは2つしか記述していませんが、複数箇所設置することが可能です。
動作サンプル

毎週金曜日の21時から23時はセールイベントを開催といった場合などページへのバナーなど導線を複数設置しておいて自動的に表示したい場合には使える方法ではないでしょうか。

1日の中でも時間帯に応じて違うものを表示する場合

H28.3.13 追記しました
コメントにて
＞1日の中で2回に分けて時間帯を指定する方法のご質問なのですが
＞例えば午前と午後に違う画像を表示させることとかできるのでしょうか？

同じ曜日でも表示する内容を時間帯に応じて違うものにしたい場合のサンプルソースを掲載してみます。

<script>
function settoday(){
  var today = new Date() ;
  var nowtime= ("0"+today.getHours()).slice(-2) +":"+("0"+today.getMinutes()).slice(-2);
  var weekday1 = [ "Sun1", "Mon1", "Tue1", "Wed1", "Thu1", "Fri1", "Sat1" ] ;
  var weekday2 = [ "Sun2", "Mon2", "Tue2", "Wed2", "Thu2", "Fri2", "Sat2" ] ;
  
  //リスト1
  var startlist1 = [ "", "", "", "", "", "", "" ]; 
  var endlist1 = [ "11:59", "11:59", "11:59", "11:59", "11:59", "11:59", "11:59" ];
   
  //リスト2
  var startlist2 = [ "12:00", "12:00", "12:00", "12:00", "12:00", "12:00", "12:00" ]; 
  var endlist2 = [ "", "", "", "", "", "", "" ];
   
  var starttime="00:00";
  var endtime="24:00";
	
  //リスト1のチェック
  if(startlist1[today.getDay()] != ""){
    starttime=startlist1[today.getDay()];
  }
  if(endlist1[today.getDay()] != ""){
    endtime=endlist1[today.getDay()];
  }
  if ( nowtime >= starttime&& nowtime <= endtime){
    document.getElementById(weekday1[today.getDay()]).style.display="block";
  }
 
  starttime="00:00";
  endtime="24:00";
  //リスト2のチェック
  if(startlist2[today.getDay()] != ""){
    starttime=startlist2[today.getDay()];
  }
  if(endlist2[today.getDay()] != ""){
    endtime=endlist2[today.getDay()];
  }
  if ( nowtime >= starttime&& nowtime <= endtime){
    document.getElementById(weekday2[today.getDay()]).style.display="block";
  }
	
}
</script>
</head>
<body onload="settoday();">

<div id="Sun1" style="display:none;">
	日曜日にリスト1の時間帯に表示する内容
</div>
<div id="Sun2" style="display:none;">
	日曜日にリスト2の時間帯に表示する内容
</div>

<div id="Mon1" style="display:none;">
	月曜日にリスト1の時間帯に表示する内容
</div>
<div id="Mon2" style="display:none;">
	月曜日にリスト2の時間帯に表示する内容
</div>

<div id="Tue1" style="display:none;">
	火曜日にリスト1の時間帯に表示する内容
</div>
<div id="Tue2" style="display:none;">
	火曜日にリスト2の時間帯に表示する内容
</div>

<div id="Wed1" style="display:none;">
	水曜日にリスト1の時間帯に表示する内容
</div>
<div id="Wed2" style="display:none;">
	水曜日にリスト2の時間帯に表示する内容
</div>

<div id="Thu1" style="display:none;">
	木曜日にリスト1の時間帯に表示する内容
</div>
<div id="Thu2" style="display:none;">
	木曜日にリスト2の時間帯に表示する内容
</div>

<div id="Fri1" style="display:none;">
	金曜日にリスト1の時間帯に表示する内容
</div>
<div id="Fri2" style="display:none;">
	金曜日にリスト2の時間帯に表示する内容
</div>

<div id="Sat1" style="display:none;">
	土曜日にリスト1の時間帯に表示する内容
</div>
<div id="Sat2" style="display:none;">
	土曜日にリスト2の時間帯に表示する内容
</div>
</body>

1日の中でも表示する内容を2つにわけるために、何箇所か修正しています。

5、6行目
var weekday1 = [ “Sun1”, “Mon1”, “Tue1”, “Wed1”, “Thu1”, “Fri1”, “Sat1” ] ;
var weekday2 = [ “Sun2”, “Mon2”, “Tue2”, “Wed2”, “Thu2”, “Fri2”, “Sat2″ ] ;

idで指定する曜日の名前を指定するリストを2つに分けました。weekday1が時間帯リスト1用、weekday2が時間帯リスト2用という使い方です。

48行目以降タグの記述について
<div id=”Sun1″ style=”display:none;”>
日曜日にリスト1の時間帯に表示する内容
</div>
<div id=”Sun2″ style=”display:none;”>
日曜日にリスト2の時間帯に表示する内容
</div>

実際に表示する内容を記述するタグでは、id=”Sun1″とid=”Sun2″と別々に記述しておきます。これで、リスト1の時間帯では、id=”Sun1″が表示され、リスト2の時間帯ではid=”Sun2″が表示されます。

これで、同じ曜日でも午前中と午後とで表示する内容を変更することが出来ると思います。

ネットショップ運営の気になる備忘録

楽天イベントバナーをスライド表示・掲載期間を設定する方法

ネットショップ運営の気になる備忘録

バナー画像などを期間指定で表示するjavascript

その他のカテゴリー

ネットショップ運営楽天 Yahoo!ショッピング便利なWebサービス jQuery javascript CSS 仕入・卸サイト便利ツールネットショップ素材

Comment

ベッコより:
2015年7月1日 17:49
はじめまして！
曜日、時間帯によっての表示切り替えについて、
大変参考にさせていただきました。
ご質問させていただきたいのですが、
例えば、表示させる時間帯が、
日曜　00:00～24:00
月曜　00:00～06:00　20:00～24:00
火曜　00:00～06:00　20:00～24:00
水曜　00:00～06:00　20:00～24:00
木曜　00:00～06:00　20:00～24:00
金曜　00:00～06:00　20:00～24:00
土曜　00:00～24:00
といった具合に、1日の中で2回に分けて
時間帯を指定することなどは可能なのでしょうか？
返信
- peacepopo より:
  2015年7月2日 01:28
  ベッコ様
  コメントありがとうございます。
  1日の中で2つの時間帯を指定出来るサンプルを
  記事内に追記してみましたので確認してみてください。
  返信
  - ベッコより:
    2015年7月2日 14:25
    早速ありがとうございます！
    思っていたように対応できました！
    返信
osamu より:
2015年9月17日 15:18
恐縮です。　日付と時間での設定は可能でしょうか？
返信
- peacepopo より:
  2015年9月17日 18:40
  osamu 様
  コメントありがとうございます。
  ＞日付と時間での設定は可能でしょうか？
  別記事
  楽天イベントバナーをスライド表示・掲載期間を設定する方法
  バナー画像などを期間指定で表示するjavascript
  にて日付と時間での表示を切り替える方法を紹介しているので参考にしてみてください。
  返信
kapib より:
2015年11月18日 13:53
参考にさせて頂いてとても助かっています！
曜日と時間帯を組み合わせて表示を切り替える方法をやってみたのですが
同一ページの複数個所に表示させようとしたら
始めの１つのみ表示されました。
id属性だからかなとも思ったのですが、変更方法がわからず、、、
どうやったらいいでしょうか？
javascriptはいつもコピペで使うだけで、ほとんどわからない初心者です。
返信
- peacepopo より:
  2015年11月19日 00:05
  kapib 様
  コメントありがとうございます。
  ＞同一ページの複数個所に表示させようとしたら
  複数箇所へとのことですが、お考えの通りid属性ではなくclass属性に変更する必要があります。
  記事内に複数箇所でのサンプルソースを追記しましたのでご確認ください。
  返信
kapib より:
2015年11月19日 16:54
昨日質問を投稿させていただきました、kapib です。
お返事をありがとうございました！昨日の今日でサンプルソースまでご紹介くださって、感激です！！
早速教えて頂きました方法で試してみたのですが、なぜか内容が表示されませんでした。
私の記述方法が間違っているのかな、と思いあれこれ試してみたのですが、どうもうまくいかず。。。
他にもJavascriptを入れているのでバッティングしてしまっているのかと思ったのですが、
気を付けるべき個所等ありますでしょうか？
お忙しいかとは存じますが、もしお時間がございます時にでも教えて頂けますと嬉しいです。
返信
- peacepopo より:
  2015年11月19日 21:19
  kapib 様
  こちらでも掲載したソースにて確認してみました。
  何点か気になる点を書き出してみます。
  まず、下記のスクリプトを呼び出す記述を省略してしまっていたので記事のソースに追記しました。
  <body onload="Settoday();">
  上記の記述が抜けていないか
  次にSettodayのSを大文字、小文字を揃える必要がある。掲載したソース確認したところ
  function Settoday　と　onload="Settoday();" 部分が大文字小文字が混在していましたので、どちらかに統一する必要があります。
  function settoday　であれば　onload="settoday();" とsを小文字で揃える必要があります。
  掲載ソースをそのままコピペで使用したのであれば、この2点の可能性があります。
  まずは、上記2点について確認してみてください。
  あとは、曜日ごとの時間設定の部分がずれて設定されている可能性もあるので合わせてご確認ください。
  それでは、よろしくお願いします。
  返信
kapib より:
2015年11月20日 10:59
peacepopo様
kapib です。早速のお返事をありがとうございました！
お手間を頂戴してしまって大変恐縮です。。
確認しましたところ、ご指摘いただいた
の「S」が大文字と小文字になっていたことが原因でした。
お恥ずかしい限りです。（汗）
無事に内容を表示させることができました。
感謝です。ありがとうございました！！
返信
こんこんより:
2016年3月5日 06:07
すみません。例えば毎日朝５時と土曜日だけ朝３時で毎日切り替えたい場合はどう記述すればよいですか？
24:00まででしか指定は無理でしょうか？
あと切り替わる時間帯は例えば5:00で切り替えたいときstartlist5:00　endlist5:00ではうまく機能しないですよね
var startlist = [ “05:00”, “05:00”, “05:00”, “05:00”, “05:00”, “03:00”, “05:00” ];
var endlist = [ “04:00”, “04:00”, “04:00”, “04:00”, “02:00”, “0？:00”, “04:00” ];
返信
こんこんより:
2016年3月6日 00:38
何度もすみません。曜日自体が0時で切り替わるため朝5時で切り替えることはできないということで理解してよろしいでしょうか。
返信
- peacepopo より:
  2016年3月7日 22:24
  こんこん様
  コメントありがとうございます。
  ＞すみません。例えば毎日朝５時と土曜日だけ朝３時で毎日切り替えたい場合はどう記述すればよいですか？
  ＞24:00まででしか指定は無理でしょうか？
  ここで掲載しているサンプルは曜日単位 → 時間帯で表示するしないを指定しているのでご希望の実装は難しいです。
  基本は時間帯で表示を切り替えつつ、もし土曜日だったら時間条件を変えるといった実装をする必要があります。
  返信
こんこんより:
2016年3月8日 01:40
ご回答ありがとうございます
やはり難しいですね
色々検索してみたんですが曜日で時間帯の指定を変えれるのは
こちらでいけそうなのですが画像のみの対応のため
こちらを応用して文章などが入れれるようにはできますでしょうか？
あと画像をwidth=100％にしたい場合はどうすれば画像が100％で表示されるかお力をお貸し頂ければ幸いです
<!–
img_list= new Array();
img_list[0] = '';
img_list[1] = '';
img_list[2] = '';
img_list[3] = '';
img_list[4] = '';
img_list[5] = '';
img_list[6] = '';
now_date=new Date();
img_num=now_date.getDay();
if(now_date.getHours()<5)img_num–;
if(img_num<0)img_num=6;
document.write('’);
//–>
朝5時に切り替わるようにこちらgetHoursは5にしてます
返信
こんこんより:
2016年3月8日 01:55
document.write(‘’);の中身が消えてしまいました
(‘の中に＜img src=”‘+img_list[img_num]+'”＞’が入ります);
<は全角で＜にしてます
返信
- peacepopo より:
  2016年3月8日 23:15
  こんこん様
  コメントありがとうございます。
  document.write("");は出力する命令なので中身に直接タグ、文字列など記述できますよ。
  例）
  document.write("<div><a href="' + url_list[img_num] + '"><img width='100%' src='" + img_list[img_num] + "'></a></div>");
  上記のように、内側にdivタグ、リンクタグなど記述も可能です。
  例えばリンク先も画像ごとに指定したい場合はの画像のURLと同じように
  url_list[0] = ”;
  url_list[1] = ”;
  url_list[2] = ”;
  url_list[3] = ”;
  url_list[4] = ”;
  url_list[5] = ”;
  url_list[6] = ”;
  と設定できるようにすることもできますね。
  固定のテキストやwidth=”100%”などであれば、document.write内に直接記述すれば良いですし、テキストも変えたいのであれば、画像、リンク先URLのように
  text_list[0] = ”;
  text_list[1] = ”;
  　・
  　・
  text_list[6] = ”;
  として指定出来るようにして、document.write内で任意の位置に組み合わせて使うのも良いかもしれません。
  返信
こんこんより:
2016年3月9日 02:58
無事にできました！ただただ感激ですｗ
素晴らしいご回答本当にありがとうございました！
返信
- peacepopo より:
  2016年3月10日 22:19
  こんこん様
  無事に実装できたようでなによりです。
  ぜひ、活用してみてください。
  返信
ゆみより:
2016年3月12日 01:18
すみません。
1日の中で2回に分けて時間帯を指定する方法のご質問なのですが
例えば午前と午後に違う画像を表示させることとかできるのでしょうか？
返信
- peacepopo より:
  2016年3月13日 01:31
  ゆみ様
  コメントありがとうございます。
  ＞1日の中で2回に分けて時間帯を指定する方法のご質問なのですが
  ＞例えば午前と午後に違う画像を表示させることとかできるのでしょうか？
  上記のご質問についてですが、記事に追記してみました。
  「1日の中で時間帯に応じて違うものを表示する場合」を参考にしてみてください。
  返信
ハマコーより:
2016年12月25日 17:32
コメント失礼します。
例えばなんですが、
特定の要素Aを毎日10:00〜22:00まで表示し、それ以外の時間帯は違う要素Bを常に表示（10〜22時はこの要素Bは非表示）するみたいなことはどうしたら良いでしょうか？
返信
- peacepopo より:
  2016年12月27日 00:58
  ハマコー様
  コメントありがとうございます。
  曜日関係なく時間帯での指定ということであれば、別記事になりますが
  「バナー画像などを期間指定で表示するjavascript」
  http://peacepopo.net/blog-entry-40.html
  に時間帯ごとに表示する画像を切り替える場合のサンプルソースを掲載していますので、そちらが参考になるかと思います。
  返信
ari より:
2017年7月16日 19:00
コメント失礼します！
＞1日の中でも時間帯に応じて違うものを表示する場合とありますが、画像を複数（２つ）使用し、曜日毎でも切り替えたいと思っているのですが、うまく組み合わせられません、、、
＞また、イレギュラーで、祝日用の画像を出すのは不可能でしょうか？（上記内容以外の時）
返信
- peacepopo より:
  2017年7月20日 01:14
  ari 様
  コメントありがとうございます。
  返事遅くなり申し訳ありません。
  もし、よろしければ具体的な条件を教えて頂けませんか？
  返信
rai より:
2018年5月9日 19:19
下記の様な表示方法にしたいのですが、どのようにすればこのような動作が可能でしょうか？
例えば一週間全て10時～11時はAのバナー、それ以外の時間は翌朝のAのバナーの期間までずっとBのバナーを表示し続けるということは可能でしょうか？
返信
- peacepopo より:
  2018年5月9日 23:38
  rai 様
  コメントありがとうございます。
  別記記事に時間帯ごとの表示表示について書いていますので、そちらを参考にしてみてください。
  「バナー画像などを期間指定で表示するjavascript」
  https://peacepopo.net/blog-entry-40.html
  返信
みやより:
2019年7月12日 12:21
はじめまして。
トップページに曜日で営業日と休業日の表示をしたいと思い、こちらの記事にたどり着きました。
月曜日は営業日だが、祝日の場合は休業日の表示にする、といった場合の動作は可能ですか？
返信
- peacepopo より:
  2019年7月13日 00:18
  みや様
  コメントありがとうございます。
  ＞月曜日は営業日だが、祝日の場合は休業日の表示にする、といった場合の動作は可能ですか？
  処理的には可能だと思いますが、曜日判定に加えて祝日判定、もしくは日付判定の処理を追加する必要があります。
  サンプルソースでは、当日が何曜日なのかをチェックしていますが、それに加えて当日が祝日なのかのチェックも追加する流れとなります。
  javascript 祝日判定等で検索すれば、いろいろな判定方法やサンプルソース等が見つかるかと思います。
  祝日判定といった難しい考え方をせずに、日付判定と考えるのもありかと思います。
  例当日が「2019/07/15」・・・・海の日だったら定休日といった感じで固定で日付をチェックする方法
  　ただ、祝日の数だけ判定する必要があるので、ソースのメンテナンスが必要になってしまいますが、考え方はシンプルになります。
  また時間があれば、記事に追記、別記事等で紹介できればと思いますが、いつになるかなどは言えないので、あまり期待しないでください。
  返信
sea より:
2020年3月20日 13:02
初めまして、一つ質問があります。
変数startlist、endlistにおいて、水曜日のendlist(表示を終わらせる時間)を記入しなかった際、
「水曜日は22:00以降に表示」
と仰っていますが、この表示はその日の24:00で終わるのでしょうか？
それとも、次の曜日の表示を開始する時刻まで表示されるのでしょうか？(例えば木曜日の表示を02:00からにしたら、02:00まで水曜日の内容が表示されるのでしょうか？)
返信
- peacepopo より:
  2020年3月24日 01:13
  sea 様
  コメントありがとうございます。お返事遅くなり申し訳ありません。
  水曜日のendlistを記入しなかった場合についてですが、これはその日の24時で表示は終わります。
  次の日になると、木曜日のstartlist、endlist で表示が決定されるようになります。
  返信
tani より:
2021年7月20日 17:28
1日のなかで3回・4回と切り替えたい場合は、「同じ曜日でも表示する内容を時間帯に応じて違うものにしたい場合のサンプルソース」のweekday3、weekday4、リスト3、リスト4という感じで増やせばできますか？
返信
- peacepopo より:
  2021年7月21日 00:36
  tani 様コメントありがとうございます。
  時間帯の区切りを増やしたいのであれば、リスト3、リスト4、リスト5と増やしてけば出来ると思いますので、よければ試してみてください。
  返信
tani より:
2021年7月22日 16:29
peacepopo様
ありがとうございます、試してみます。
ちなみに時間でwebサイトの表示を切り替えたいのですが、その場合～の中はどうしたらよろしいでしょうか？
返信
- peacepopo より:
  2021年7月25日 01:01
  ＞ちなみに時間でwebサイトの表示を切り替えたいのですが、その場合～の中はどうしたらよろしいでしょうか？
  ここでのサンプルはDIV要素に対して、基本は非表示で指定した時間帯のみ表示するようにしています。
  表示を切り替えたいというのが、部分的なもので良いのかページの広範囲、複数箇所、何パターンあるのかによって変わってくるかもしれませんが、指定のDIV内に複数のコンテンツがある場合でも画像100個、表100個でも指定DIV内のコンテンツが表示されます。このサンプルのような仕組を使うのであれば、表示を切り替えたい箇所分のDIV要素を準備する必要があります。
  ページ全体の内容を切り替えたいというのであれば、違った仕組にした方が良いかもしれません。
  tani様の意図をくみ取れてない回答かもしれませんが、ご確認をよろしくお願いいたします。
  返信
なかより:
2021年10月5日 10:10
突然のコメント失礼致します。
曜日、時間帯によっての表示切り替えについて調べていた中で、
こちらのページを発見して参考にさせていただいておりました。
ご質問させていただきたいのですが、
毎週決まった曜日・時間に表示したいものと、それ以外の時間で表示したいものを切り替える場合、どういった記述方法が良いのでしょうか。
例えば、
・毎週金曜日の20時から日曜日の20時までは「A」を表示
・それ以外の曜日・時間では「B」を表示
といった感じの場合です。
よろしければご教授いただけるとありがたいです。
よろしくお願いいたします。
返信
- peacepopo より:
  2021年10月7日 01:15
  なか様
  コメントありがとうございます。
  サンプルのソースとは別で考えてみた場合ざっくり下記のような形でしょうか。
  // Sunday – Saturday : 0 – 6
  if (today.getDay()==5){
  　//金曜日の場合
  　if ( nowtime >= "20:00" && nowtime <= "22:00"){
  　　//20時から22時の場合
  　　//id=A を表示する
  　　document.getElementById("A"]).style.display="block";
  　}
  }else{
  　//それ以外の曜日の場合
  　if ( nowtime >= "20:00" && nowtime <= "22:00"){
  　　//20時から22時の場合
  　　//id=B を表示する
  　　document.getElementById("B"]).style.display="block";
  　}
  }
  ※インデント揃えるために左側に全角スペース含まれていますので、コピペする場合は全角スペースを半角スペース等に置き換えてください。
  返信
  - なかより:
    2021年10月11日 10:13
    ありがとうございました！
    たいへん助かりました。
    返信
fuji より:
2023年8月9日 19:58
第一水曜日・第三水曜日のみ表示をしたいのですがどのようにすればよろしいですか?
返信
- peacepopo より:
  2023年8月9日 21:38
  fuji様コメントありがとうございます。
  2段階となりますが、記述してみると
  ・今日の曜日をチェック　
  　　today.getDay()==3　水曜日かどうか
  ・第○曜日かチェック
  　　(Math.ceil(today.getDate() / 7))==1 第1かどうか
  　　(Math.ceil(today.getDate() / 7))==3 第3かどうか
  // Sunday – Saturday : 0 – 6
  if (today.getDay()==3){
  　　//水曜日の場合
  　　if ((Math.ceil(today.getDate() / 7))==1){
  　　　　//第1曜日の場合
  　　　　document.getElementById(“A”]).style.display=”block”;
  　　}else if ((Math.ceil(today.getDate() / 7))==3){
  　　　　//第3曜日の場合
  　　　　document.getElementById(“A”]).style.display=”block”;
  　　}
  }
  ※インデント揃えるために左側に全角スペース含まれていますので、コピペする場合は全角スペースを半角スペース等に置き換えてください。
  返信