サイドスクロール画像ですが、画像が変更されます

Question

私は、50msごとに1pxの割合でサイドスクロールするCSS背景画像を持つヘッダーを持っています。しかし、背景画像はユーザーのコンピュータの時間によって変わり、これをどうやってやっていくのか分かりません。私はサイドスクロール自体のコードを書いたが、それ以外は何も書かなかった。

function styleSwitcher() { 
    var currentTime = new Date().getHours(); 
    if (0 <= currentTime&&currentTime < 6) { 
    document.write("<link rel='stylesheet' href='css/night.css' type='text/css'>"); 
    } 
    if (6 <= currentTime&&currentTime < 18) { 
    document.write("<link rel='stylesheet' href='css/day.css' type='text/css'>"); 
    } 
    if (18 <= currentTime&&currentTime <= 24) { 
    document.write("<link rel='stylesheet' href='css/night.css' type='text/css'>"); 
    } 
} 

styleSwitcher(); 

CSS（唯一の違い：

setInterval("mvheader()",50); 
function mvheader() { 
window.cssXPos=window.cssXPos+1; 
if (window.cssXPos>=window.cssMaxWidth) { 
window.cssXPos=0; 
} 
toMove=document.getElementById("header"); 
toMove.style.backgroundPosition=window.cssXPos+"px 0px"; 
} 

JavaScriptが時間に応じて、異なるCSSファイルを使用するために使用：

のJavascriptは、サイドスクロールする（何もない）を使用しました。

#header { 
background-image:url(../img/day/tile.png); 
background-repeat:repeat-x; 
position:absolute; 
height:100px; 
width:100%; 
top:0; 
left:0; 
z-index:9; 
} 

Answer 1

すべてのR：他のファイルbewteenフォルダ名ではなく、昼とその逆の夜）でありますあなたの横スクロールのスクリプトに問題がいくつかありましたIGHT、よう：ドキュメントがロードされた前

• mvheader機能を実行する式を使用して
• （私はあなたのコードはjsの外部ファイルにあったと仮定しています）：setInterval("mvheader()", 50)それは期待どおりに動作しますが、その構文を使用すると、JavaScriptは最初の引数として渡された文字列を解釈する必要があります。あなたは同等としてsetInterval(mvheader, 50)を使用することができます - あなたが見ることができるように、あなたは今までのパラメータとして関数を渡すだろうのsetInterval変数toMove定義するときに「VAR」キーワードを使用していない
• - IE
に期待どおりに動作しないでしょう
• 追加の変数のcssXPosでグローバルスコープ（windowオブジェクト）を汚染し、cssMaxWidth

私はあなたのコードを変更した、あなたはここで働いバージョンを確認することができます：http://jsfiddle.net/wtk_pl/ydJhr/4/を。

しかし、新しい変数でグローバルスコープを汚染しない洗練されたバージョンを作成しました。また、変数に#headerノードを「キャッシュ」しているため、より良いパフォーマンスを発揮するはずです。 mvheader()の各繰り返し。ここでそれをチェックしてください：http://jsfiddle.net/wtk_pl/ydJhr/9/

これはJavaScriptで完全に実行できますが、サーバー側で行うことをお勧めします（ページコンテンツを送信する前に適切なCSSファイルを決定して埋め込むことを意味します）。ユーザーに） - なぜクライアント側のスクリプトに気をつけますか？