時間帯によって背景を切り替えるJavascriptとCSS

質問

時間帯によって背景を切り替えるJavascriptとCSSを作りたいのですが以下の書き方で良いのでしょうか？切り替わるには切り替わるのですが、時間の指定がうまくいってないようです。。

また下の3行はJavascriptをOFFにしているときはこのCSSという意味で良いですか？

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function getCSS()
{
datetoday = new Date();
timenow=datetoday.getTime();
datetoday.setTime(timenow);
thehour = datetoday.getHours();

if (thehour > 20)
display = "includes/tree_twilight.css";
else if (thehour > 17)
display = "includes/tree_sunset.css";
else if (thehour > 14)
display = "includes/tree_afternoon.css";
else if (thehour > 11)
display = "includes/tree_noon.css";
else if (thehour > 7)
display = "includes/tree_morning.css";
else if (thehour > 4)
display = "includes/tree_sunrise.css";
else if (thehour > 1)
display = "includes/tree_twilight.css";
else
display = "includes/tree_sunset.css";

var css = '<';
css+='link rel="stylesheet" href=' + display + ' \/';
css+='>';

document.write(css);
// End -->
}
</script>

<script language="javascript">getCSS();</script>

<noscript>
<link rel="stylesheet" href="includes/tree_sunset.css" type="text/css"/>
</noscript>

宜しくお願いします。。

回答No.4

Oh-Orange · ベストアンサー

★『>』と『>=』演算子の使い方は、次のようになります。

サンプル1:
if ( thehour > 17 ){
　18～23時
}
else if ( thehour > 11 ){
　12～17時
}
else if ( thehour > 5 ){
　6～11時
}
else{
　0～5時
}

サンプル2:
if ( thehour >= 18 ){
　18～23時
}
else if ( thehour >= 12 ){
　12～17時
}
else if ( thehour >= 6 ){
　6～11時
}
else{
　0～5時
}

解説:
・『>』演算子よりも『>=』演算子の方が分かりやすいというのは if の
　ブロック内の最初が『比較時間～』という解釈が出来るからです。
　どちらでも処理的には同じですので最終的に『お好み』ですよ。
　これで分かりましたか？
・以上。→私は『サンプル2』の方が分かりやすいと思った。でアドバイスしたの。

お礼

わかりました！
ご丁寧な説明ありがとうございました。

今後とも宜しくお願い致します。

回答No.5

noname#56851

始めに基本となるcssを読み込んでしまうと、javascriptoを無効にしてあっても大丈夫になるし、後で読み込むcssを変更部分だけ書かれたものに出来ますので、良いかと。
質問の答えとしては意味が無いとは思いますが。

回答No.3

Oh-Orange

★文法的には『；』は必要ですね。
・別の回答です。参考に！→先頭の番号は削除してお使い下さい。

サンプル1:
CSStable = [
0　"includes/tree_sunset.css",
1　"includes/tree_sunset.css",
2　"includes/tree_twilight.css",
3　"includes/tree_twilight.css",
4　"includes/tree_twilight.css",
5　"includes/tree_sunrise.css",
6　"includes/tree_sunrise.css",
7　"includes/tree_sunrise.css",
8　"includes/tree_morning.css",
9　"includes/tree_morning.css",
0　"includes/tree_morning.css",
1　"includes/tree_morning.css",
2　"includes/tree_noon.css",
3　"includes/tree_noon.css",
4　"includes/tree_noon.css",
5　"includes/tree_afternoon.css",
6　"includes/tree_afternoon.css",
7　"includes/tree_afternoon.css",
8　"includes/tree_sunset.css",
9　"includes/tree_sunset.css",
0　"includes/tree_sunset.css",
1　"includes/tree_twilight.css",
2　"includes/tree_twilight.css",
3　"includes/tree_twilight.css"
];
display = CSStable[thehour];

サンプル2:
switch ( thehour ){
　case 2: case 3: case 4: display = "includes/tree_twilight.css"; break;
　case 5: case 6: case 7: display = "includes/tree_sunrise.css"; break;
　case 8: case 9: case 10: case 11: display = "includes/tree_morning.css"; break;
　case 12: case 13: case 14: display = "includes/tree_noon.css"; break;
　case 15: case 16: case 17: display = "includes/tree_afternoon.css"; break;
　case 18: case 19: case 20: display = "includes/tree_sunset.css"; break;
　case 21: case 22: case 23: display = "includes/tree_twilight.css"; break;
　default: display = "includes/tree_sunset.css";
}

最後に:
・『else if』の使い方は、回答者 No.2 さんの様にしなくても大丈夫ですよ。
　ただ、分かりやすく『>=』の演算子を使えばよいのです。分かりますか？
・上記の『CSStable』の時間帯は cheese0084 さんの質問内容を忠実に再現していますので
　時間帯が違うときは修正して下さい。サンプル2も同様に修正などして下さい。
・以上。おわり。→今後の参考に！

お礼

>★文法的には『；』は必要ですね。

了解です。

>・『else if』の使い方は、回答者 No.2 さんの様にしなくても大丈夫ですよ。
ただ、分かりやすく『>=』の演算子を使えばよいのです。分かりますか？

う～ん、よく分かんないですけど、simple is the bestって事ですね！
有難うございました、今後の参考にさせていただきます！！

回答No.2

tapping_h

すいませんさらに追記です。
css切り替えの機能自体はうまく行ってると思われるので、
if条件を少し。多分このように細かくわけないと質問者さまの想定どおりにならないと思うのですが・・・。
____________

if ((24>thehour) &&( thehour >= 20)){
display = "includes/tree_twilight.css"
}
else if ((20>thehour) && (thehour>=17)){
display = "includes/tree_sunset.css"
}
else if( (17>thehour) && (thehour >=14)){
display = "includes/tree_afternoon.css"
}
else if((14>thehour) && (thehour >=11)){
display = "includes/tree_noon.css"
}
else if ((11>thehour) &&( thehour >=7)){
display = "includes/tree_morning.css"
}
else if((7>thehour) && (thehour>=4)){
display = "includes/tree_sunrise.css"
}
else if ((4 >thehour )&&( thehour>= 1)){
display = "includes/tree_twilight.css"}
else
{display = "includes/tree_sunset.css"}

_____________

これでパソコンの時間を手動で変更して動作確認していただければうまくいく・・・筈です。(^^;

お礼

else if ((20>thehour) && (thehour>=17)){
の部分を
else if ((19>thehour) && (thehour>=17)){
にしてみたら丁度のタイミングで変わりました。

が
僕が書いているスクリプトには
else if ((19>thehour) && (thehour>=17))
{display = "includes/tree_sunset.css";}
のようにcss"のあとに;があるんですけど、これは不要なのですか？

回答No.1

tapping_h

if文の書式ではないでしょうか。
{}が抜けていると思われます。
__________________________________

if(条件){動作}
else if (条件){動作}
　・・・・略　・・・・
else{display = "includes/tree_sunset.css"}
______________________________

こんな修正ではどうでしょうか。

お礼

あ、なんかうまくいってるっぽいです。

有難うございました！