- ベストアンサー
日毎にページデザインをローテーションしたい
ご相談させて下さい。 今、作りたいウェブページなのですが、日々、トップページの一部デザインをローテーションさせたいと思っています。 トップページに、掲載記事へのリンクと説明文が記載されているボックスが5つあり、これが縦に並んでいます。この順番を、毎日0時に入れ替えて、5日で一回りのローテーションにしたいのです。 JavaScript等でCSSを毎日切り替えるといったようなを制御出来ないものかと考えているのですが、HTMLとCSSをある程度とJavaScriptとCGIを極少しいじったことがあるだけ程度のスキルなので良い方法が思いつきません。 まったく違った方法をも含め、妙案授けて頂けたらと思います。宜しくお願い致します。
- prussianblue
- お礼率85% (46/54)
- CSS
- 回答数3
- ありがとう数6
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
１０日後 余り 0 11 1 12 2 13 3 14 4 15 0 16 1 17 2 . . . . 1000 0 1001 1 5の余りを仮にXとします。 style=[ '<link href="style01.css" rel="stylesheet" type="text/css">', '<link href="style02.css" rel="stylesheet" type="text/css">', '<link href="style03.css" rel="stylesheet" type="text/css">', '<link href="style04.css" rel="stylesheet" type="text/css">', '<link href="style05.css" rel="stylesheet" type="text/css">' ] と配列を作ったと仮定すると style[X]は毎日変化すると言うことです。 しかも０～４の範囲内でローテーションすると言うことです。 さらに配列を参照する関数を１秒毎に呼び出せば日が変わると参照される値も変わります。
その他の回答 (2)
この問題は日付から０～４の数字を出せば良いのでしょうか。 そうするとJavaScriptでは下のサイトに書かれているように http://www.openspc2.org/JavaScript/ref/Date/getTime.htm 日付オブジェクトのgetTime()メソッドで”1970年1月1日午前00:00:00からの秒数を返します”らしいです。 これを24,60,60,1000で割ると日数が出ます。 http://www.openspc2.org/reibun/javascript/string/018/ これを5で割って余りを取ると0～4の数字が取れるかも知れません。（未確認） 検索しても割り算の余りについての参考になるサイトが見つかりませんでした。 ボックスが縦に並んでいるようなので <div id="aaa"> <div>0</div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> となっていることを想定するとdocument.getElementById('aaa').getElementsByTagName('div')がボックスの配列になりますね。 そうすると最初に0～4の数字を計算しておき、ボックスは非表示（display:none）にしておき、その番号のdivをdisplay:blockとすれば良いじゃないでしょうか。 document.getElementById('aaa').getElementsByTagName('div')[x].display = 'block'
補足
ご回答有難う御座います。 >これを5で割って余りを取ると0～4の数字が取れるかも知れません。 の部分を、どうしても理解することが出来ませんでした。当日までの日数が出せた場合に、これを5で割った結果をどう扱って良いか読み解けず、挫折してしまいました。自力で出来たのは以下のような状況までで、これだと、毎月同じ日に同じCSSが適用されてしまうので本来の趣旨から外れてしまいます。やはり、k506d467様が教えて下さっている切り口から何かが見えそうなので、もう少しお力添え頂けましたら幸いです。 <script type="text/javascript" language="JavaScript"> <!-- style=new Array(31) style[1]='<link href="style01.css" rel="stylesheet" type="text/css">'; style[2]='<link href="style02.css" rel="stylesheet" type="text/css">'; style[3]='<link href="style03.css" rel="stylesheet" type="text/css">'; style[4]='<link href="style04.css" rel="stylesheet" type="text/css">'; style[5]='<link href="style05.css" rel="stylesheet" type="text/css">'; ～～～～～～ style[31]='<link href="style01.css" rel="stylesheet" type="text/css">'; d=new Date(); document.write(style[d.getDate()]); //--> </script> </head>
- k-josui
- ベストアンサー率24% (3220/13026)
http://home.impress.co.jp/magazine/hpmag2/skillup/jscript/03/02.htm http://www5b.biglobe.ne.jp/~dil-4/java/date-msg.html
お礼
ご回答有難う御座いました。ご紹介頂きました参考ウェブページで、考え方の基本を得ることが出来ました。大変お世話になりました。
補足
早くのご回答有難う御座いました。 やはり、曜日毎や月間でのローテーションは、「get.Day()」等を使えば良いということは分かるのですが、5日間のローテーションというのはなかなか思いつきません。素晴らしいヒントを頂いたのに活かせず申し訳御座いませんが、引き続きお力添え頂けましたら嬉しいです。 ちなみに、現状では以下の通りまでにはしているのですが、6日目以降が表示されないのが明白で、解決の糸口が見当たりません。 <head> <script type="text/javascript" language="JavaScript"> <!-- msg=new Array(5) msg[0]='<link href="style01.css" rel="stylesheet" type="text/css">'; msg[1]='<link href="style02.css" rel="stylesheet" type="text/css">'; msg[2]='<link href="style03.css" rel="stylesheet" type="text/css">'; msg[3]='<link href="style04.css" rel="stylesheet" type="text/css">'; msg[4]='<link href="style05.css" rel="stylesheet" type="text/css">'; d=new Date(); document.write(msg[d.getDay()]); //--> </script> </head>
お礼
理解力が追いついていない私でしたが、 とても解り易いご説明有難う御座います！ きっと余剰演算子「%」を使えばこの値が求められるんですね。余りを取るの意味が理解出来ていませんでした。これで、目的のものが実現できます。本当にお世話になりました。