javascriptで季節によって、HTMLのテーブル背景を自動的に変えるスクリプトを教えてください。

必要な仕様を勘違いしているかもしれませんが……

背景画像を変える場合：

<script type=”text/javascript”>

onload = function(images, t, i, j) {

images = [’haru.jpg’,’natsu.jpg’,’aki.jpg’,’fuyu.jpg’]

t = document.getElementsByTagName(’TABLE’)

i = Math.floor(((new Date().getMonth()+10)%12)/3)

for (j = 0; j < t.length; ++j) {

t[j].style.backgroundImage = ’url(’+images[i]+’)’

}

}

</script>

背景色を変える場合：

<script type=”text/javascript”>

onload = function(colors, t, i, j) {

colors = [’#fee’,’#efe’,’#ffe’,’#eef’] // 春色, 夏色, 秋色, 冬色

t = document.getElementsByTagName(’TABLE’)

i = Math.floor(((new Date().getMonth()+10)%12)/3)

for (j = 0; j < t.length; ++j) {

t[j].style.backgroundColor = colors[i]

}

}

</script>

<SCRIPT type=”text/javascript”><!--

now=new Date();

mo=now.getMonth()+1;

if (mo==12 || mo<=2) {

document.write(’<TABLE BGCOLOR=”#0055FF”>’);

}

else if (mo>=3 && mo<=5) {

document.write(’<TABLE BGCOLOR=”#FF8FFF”>’);

}

else if (mo>=6 && mo<=8) {

document.write(’<TABLE BGCOLOR=”#00FF00”>’);

}

else {

document.write(’<TABLE BGCOLOR=”#0080FF”>’);

}

// --></SCRIPT>

<TR>

<TD>

TEST

</TD>

</TR>

</TABLE>

色etc.適当ですが。

<script language=”javascript”>

<!--//

function ChangeTableBack()

{

var arrUrl = new Array(”URL-01.jpg”,”URL-02.jpg”,”URL-03.jpg”)

nTemp = Math.round(Math.random()*(arrUrl.length-1));

strHtml = ”url(”+arrUrl[nTemp]+”)”;

document.getElementById(”TableBack”).style.background = strHtml;

document.getElementById(”TableBack”).style.backgroundRepeat = ”no-repeat”;

}

//-->

</script>

のように書いてみてください。

「”URL-01.jpg”,”URL-02.jpg”,”URL-03.jpg”」

の部分に背景画像を指定します。

「document.getElementById(”TableBack”).style.backgroundRepeat = ”no-repeat”;」

の行はリピートさせないための記述です。

リピートさせる時は省略してかまいません。

時刻による選択のロジックを、月を抽出して比較するという微妙な変換が必要かもしれませんが、比較的サンプルの多いものです。

掲題URL１番目の背景自動切換えを見てみてください

２番目以降は参考に使えるページです。

<SCRIPT languqge=javascript>

<!--

//季節ごと(月ごと)にテーブル背景を変えるjavascript

//日付判定

now=new Date();

month=now.getMonth()+1;

//季節判定

var color;

//12月又は１〜２月

if (month==12 || month<=2) color=”silver”;

//３〜５月

if (month>=3 && month<=5) color=”pink”;

//６〜８月

if (month>=6 && month<=8) color=”aqua”;

//９〜11月

if (month>=9 && month<=11) color=”orange”;

//TABLEタブ記述開始

document.write(”<TABLE”);

//背景色指定

document.write(” bgcolor=”,color);

//その他オプション指定(省略可)

document.write(” border=1”);

//TABLEタブ記述終了

document.write(”>”);

//ここまで

// -->

</SCRIPT>

<!--以下通常のhtmlを記述-->

<TR>

<TD>TEST</TD>

<TD>TEST</TD>

<TD>TEST</TD>

</TR>

<TR>

<TD>TEST</TD>

<TD>TEST</TD>

<TD>TEST</TD>

</TR>

</TABLE>

---

色や月はお好きに設定してください