Tipsメニュー

時間帯で背景・文字色を変更


☆ソースの解説☆

IEのみに対応させるならシンプルなソースで済むのですが、NNにも対応させるとなると強引なソースになります。あんまり良くないかも…。ちゃんとエラーなしで動くけど。

<head>〜</head>に記述するScript
<!--ここから-->
<script language="JavaScript">
<!--
accessTime = new Date();
accessHours = accessTime.getHours();
var kabe;
var iro;
if(accessHours >= 5 && accessHours < 9){
kabe='asa.gif';
iro='#000080';
}
else if(accessHours >= 9 && accessHours < 18){
kabe='hiru.gif';
iro='#339933';
}
else {
kabe='yoru.gif';
iro='#FFFFFF';
}
<!---->
</script>

コピーはこちらからどうぞ。



次に、<body>〜</body>の一番上に次のScriptを入れて下さい。
(もし不具合が生じたら、<head>の一番下に入れてみて下さい)
<script language="JavaScript">
<!--
document.write('<body background="',kabe,'" text="',iro,'" >');
<!---->
</script>

コピーはこちらからどうぞ。


☆注意☆
<body>の代わりに入れるScriptで、他のオプション(例えばonclick=""など)を加える場合はScript内の該当する部分に入れて下さい。その際、「'」などJavaScriptに影響する文字が存在する場合、「\'」などに置き換えておいて下さい。

☆参考までに…☆
以上のサンプルはNNに対応させるためのソースです。また、なぜ2つにJSを分けたかというと、1つにまとめたら何故か朝なのに夜の壁紙で表示されてしまったからです。(^^;;;;
で、それはともかく、「NNなんて嫌いだっ。最初からNNを無視して作ってる。」って方は、次のようなソースの方がいいと思います。上のサンプルだと、<body>タグが2つ存在しているからです。

<script language="JavaScript">
<!--
function changeKabe(){
accessTime = new Date();
accessHours = accessTime.getHours();
var kabe;
var iro;
if(accessHours >= 5 && accessHours < 9){
kabe='asa.gif';
iro='#000080';
}
else if(accessHours >= 9 && accessHours < 18){
kabe='hiru.gif';
iro='#339933';
}
else {
kabe='yoru.gif';
iro='#FFFFFF';
}
document.body.background = kabe;
document.body.text = iro;
}
<!---->
</script>

さらに、<body onload="changeKabe()">として下さい。

これを利用する場合、Scriptは<head>〜</head>に記述して下さい。また、NN対策、あるいはJS未対応ブラウザ用に<body>のオプションで壁紙、背景色、文字色を指定しておくと良いと思います。(壁紙の指定はJSが優先されます。)