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

公開日:  最終更新日:2016/03/13

この記事のタイトルとURLをコピーする

JavaScriptで曜日ごとに表示内容を変える方法 曜日と時間帯を組み合わせたサンプルソースもあり
ショップによっては毎週土曜日はセール日などといったイベントを定期的に開催したりしているのではないでしょうか。
先日書いた記事

CSS[display:none;]知っていると意外と便利!!要素の表示・非表示の切り替えが簡単に出来る
javascriptを使って期間限定のイベントバナーなどを表示、非表示切り替える方法について紹介しました。 以前書いた記事 ショップ...

表示、非表示を簡単に切り替える方法を紹介しました。
先日の記事と関連する内容になりますが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時から指定する場合は、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
ネットショップを運営していくなかで楽天スーパーセールのような期間限定のイベントを実施することがあると思います。 イベントの...
スポンサードリンク
FacebookページやGoogle+ページにもブログ更新・気になる情報を流していますので
よろしければ、この機会にぜひ「フォロー」または「いいね」をよろしくお願いします。

ネットショップ出店をお考えの方はこちらをどうぞ

ネットショップ出店サービス一覧

ショップ運営に使えるjQuery動作デモ1ページにまとめてみた

ECサイト・ネットショップで使えるjQueryデモをまとめてみた

ショップにカルーセル表示を実装「おすすめ」

カルーセル表示実装ならjQuery「slick.js」が簡単でおすすめ

ネットショップ運営の効率化に使えるソフト・ASPサービス

ネットショップ受注・在庫・商品・発注管理

ヒートマップ分析も出来る無料のアクセス解析

仕入先・商材をお探しの方はこちらをどうぞ

ネットショップ運営に使える仕入・卸サイト一覧

ネットショップへの集客に使える広告いろいろ

ネットショップへの集客に使える広告まとめ

ネットショップで使えるCSS・JavaScriptのデモを1ページにまとめてみた

ECサイト・ネットショップで使えるCSS・JavaScriptのデモをまとめてみた

ブログでの集客に記事作成代行サービスを活用

記事作成に使える記事外注サービスまとめ

お店(実店舗)の集客に活用できる店舗ポータル・Webサービスまとめてみた

お店(実店舗)の集客に活用できる登録サイト・webサービスまとめてみた

ショップ運営に役立つwebサービス・ツールについてまとめてみた

ECサイト・ネットショップで使えるwebサービス・ツールをまとめてみた

楽天市場の運営者向けの商品陳列HTMLタグ生成無料ツール作ってみました

楽天市場向け無料ツール

ネットショップ運営「おすすめ書籍」


紙媒体より電子書籍(Kindle版)の方がお得です
>>>ネットショップ運営 おすすめ書籍[Kindle版]

Comment

  1. ベッコ より:

    はじめまして!
    曜日、時間帯によっての表示切り替えについて、
    大変参考にさせていただきました。

    ご質問させていただきたいのですが、
    例えば、表示させる時間帯が、

    日曜 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 より:

      ベッコ 様

      コメントありがとうございます。
      1日の中で2つの時間帯を指定出来るサンプルを
      記事内に追記してみましたので確認してみてください。

  2. osamu より:

    恐縮です。 日付と時間での設定は可能でしょうか?

  3. kapib より:

    参考にさせて頂いてとても助かっています!

    曜日と時間帯を組み合わせて表示を切り替える方法をやってみたのですが
    同一ページの複数個所に表示させようとしたら
    始めの1つのみ表示されました。

    id属性だからかなとも思ったのですが、変更方法がわからず、、、
    どうやったらいいでしょうか?
    javascriptはいつもコピペで使うだけで、ほとんどわからない初心者です。

    • peacepopo より:

      kapib 様
      コメントありがとうございます。
      >同一ページの複数個所に表示させようとしたら

      複数箇所へとのことですが、お考えの通りid属性ではなくclass属性に変更する必要があります。
      記事内に複数箇所でのサンプルソースを追記しましたのでご確認ください。

  4. kapib より:

    昨日質問を投稿させていただきました、kapib です。
    お返事をありがとうございました!昨日の今日でサンプルソースまでご紹介くださって、感激です!!

    早速教えて頂きました方法で試してみたのですが、なぜか内容が表示されませんでした。
    私の記述方法が間違っているのかな、と思いあれこれ試してみたのですが、どうもうまくいかず。。。
    他にもJavascriptを入れているのでバッティングしてしまっているのかと思ったのですが、
    気を付けるべき個所等ありますでしょうか?

    お忙しいかとは存じますが、もしお時間がございます時にでも教えて頂けますと嬉しいです。

    • peacepopo より:

      kapib 様

      こちらでも掲載したソースにて確認してみました。
      何点か気になる点を書き出してみます。

      まず、下記のスクリプトを呼び出す記述を省略してしまっていたので記事のソースに追記しました。
      <body onload="Settoday();">
      上記の記述が抜けていないか

      次にSettodayのSを大文字、小文字を揃える必要がある。掲載したソース確認したところ
      function Settoday と onload="Settoday();" 部分が大文字小文字が混在していましたので、どちらかに統一する必要があります。

      function settoday であれば onload="settoday();" とsを小文字で揃える必要があります。

      掲載ソースをそのままコピペで使用したのであれば、この2点の可能性があります。

      まずは、上記2点について確認してみてください。

      あとは、曜日ごとの時間設定の部分がずれて設定されている可能性もあるので合わせてご確認ください。
      それでは、よろしくお願いします。

  5. kapib より:

    peacepopo様

    kapib です。早速のお返事をありがとうございました!
    お手間を頂戴してしまって大変恐縮です。。

    確認しましたところ、ご指摘いただいた

    の「S」が大文字と小文字になっていたことが原因でした。
    お恥ずかしい限りです。(汗)

    無事に内容を表示させることができました。
    感謝です。ありがとうございました!!

  6. こんこん より:

    すみません。例えば毎日朝5時と土曜日だけ朝3時で毎日切り替えたい場合はどう記述すればよいですか?
    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” ];

  7. こんこん より:

    何度もすみません。曜日自体が0時で切り替わるため朝5時で切り替えることはできないということで理解してよろしいでしょうか。

    • peacepopo より:

      こんこん 様

      コメントありがとうございます。

      >すみません。例えば毎日朝5時と土曜日だけ朝3時で毎日切り替えたい場合はどう記述すればよいですか?
      >24:00まででしか指定は無理でしょうか?

      ここで掲載しているサンプルは曜日単位 → 時間帯で表示するしないを指定しているのでご希望の実装は難しいです。
      基本は時間帯で表示を切り替えつつ、もし土曜日だったら時間条件を変えるといった実装をする必要があります。

  8. こんこん より:

    ご回答ありがとうございます
    やはり難しいですね

    色々検索してみたんですが曜日で時間帯の指定を変えれるのは
    こちらでいけそうなのですが画像のみの対応のため
    こちらを応用して文章などが入れれるようにはできますでしょうか?

    あと画像を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にしてます

  9. こんこん より:

    document.write(‘’);の中身が消えてしまいました

    (‘の中に<img src=”‘+img_list[img_num]+'”>’が入ります);

    <は全角で<にしてます

    • peacepopo より:

      こんこん 様

      コメントありがとうございます。
      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内で任意の位置に組み合わせて使うのも良いかもしれません。

  10. こんこん より:

    無事にできました!ただただ感激ですw
    素晴らしいご回答本当にありがとうございました!

    • peacepopo より:

      こんこん 様

      無事に実装できたようでなによりです。
      ぜひ、活用してみてください。

  11. ゆみ より:

    すみません。

    1日の中で2回に分けて時間帯を指定する方法のご質問なのですが
    例えば午前と午後に違う画像を表示させることとかできるのでしょうか?

    • peacepopo より:

      ゆみ 様

      コメントありがとうございます。
      >1日の中で2回に分けて時間帯を指定する方法のご質問なのですが
      >例えば午前と午後に違う画像を表示させることとかできるのでしょうか?

      上記のご質問についてですが、記事に追記してみました。
      「1日の中で時間帯に応じて違うものを表示する場合」を参考にしてみてください。

  12. ハマコー より:

    コメント失礼します。
    例えばなんですが、
    特定の要素Aを毎日10:00〜22:00まで表示し、それ以外の時間帯は違う要素Bを常に表示(10〜22時はこの要素Bは非表示)するみたいなことはどうしたら良いでしょうか?

    • peacepopo より:

      ハマコー 様

      コメントありがとうございます。
      曜日関係なく時間帯での指定ということであれば、別記事になりますが
      「バナー画像などを期間指定で表示するjavascript」
      http://peacepopo.net/blog-entry-40.html
      に時間帯ごとに表示する画像を切り替える場合のサンプルソースを掲載していますので、そちらが参考になるかと思います。

Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

スポンサードリンク

記事が気に入ったらシェアお願いします

PAGE TOP ↑