人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

javascriptで季節によって、HTMLのテーブル背景を自動的に変えるスクリプトを教えてください。
<条件>
・コピペで使えるもの
・HTMLソース内書く
お願いいたします。

●質問者: ykan
●カテゴリ:ウェブ制作
✍キーワード:HTML JavaScript コピペ スクリプト ソース
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● 2%
●10ポイント

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

背景画像を変える場合:

<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>


2 ● maq
●10ポイント

<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.適当ですが。


3 ● sssplus
●10ポイント

<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”;」

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

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

◎質問者からの返答

このスクリプトは季節でかわるのでしょうか?


4 ● くいっぱ
●10ポイント

http://www3.airnet.ne.jp/uncle/jvscript/frameset.htm

JavaScript入門フレーム

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

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

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

http://www.red.oit-net.jp/tatsuya/java/

イヌでもわかるJavaScript講座

http://www2s.biglobe.ne.jp/~club_tom/index.htm


5 ● YUYUKOALA
●50ポイント

<SCRIPT languqge=javascript>

<!--

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

//日付判定

now=new Date();

month=now.getMonth()+1;

//季節判定

var color;

//12月又は1〜2月

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

//3〜5月

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

//6〜8月

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

//9〜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>

---

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ