私は毎晩Javascriptで背景色を変更したい

Question

私はJavaScriptには新しく、この特定のスクリプトは私が取り組んでいるプロジェクトのJSになければなりません。

午前中に1つのバックグラウンド、1日にもう1つ、夜に別のバックグラウンドを持ちたいと思います。これは私のスクリプトですが、私のページには何も表示されていません。この例では、単にテキストを印刷しています。どうしましたか？

var t = date("H"); 
 

 
if (var t < "10") { 
 
    document.write("Have a good morning!"); 
 
} elseif (var t < "20") { 
 
    document.write("Have a good day!"); 
 
} else { 
 
    document.write("Have a good night!"); 
 
}

私は同様の問題のためにStackOverflowの上で閲覧していることに注意してくださいしかし、私はどんな...私はまた私のJSを通じて読んだマニュアルを見つけることができませんでしたが、私は見つけることができません問題。

Answer 1

簡単なモックアップです。

現地時間に応じて、背景色とテキストが変更されます。

私はまた、毎分再チェックするようにしました。したがって、ページを開いたままにすると、時間が変わると色が変わります。

もう少し努力すれば、日中に色をトゥイーンにすることもできます。

私もdocument.writeを削除しました。これは悪い習慣では使用しないでください。ここでは、テキストを表示するためにdivにquerySelectorを使用しました。

function updateBackground() { 
 
    var 
 
    hr = (new Date()).getHours(), 
 
    body = document.body, 
 
    bstyle = body.style,  
 
    hello = document.querySelector(".hello");  
 
    if (hr < 10) { 
 
    bstyle.backgroundColor = "yellow"; 
 
    bstyle.color = "black"; 
 
    hello.innerText = "Have a good morning"; 
 
    } else if (hr < 20) { 
 
    bstyle.backgroundColor = "green"; 
 
    bstyle.color = "white"; 
 
    hello.innerText ="Have a good day!"; 
 
    } else { 
 
    bstyle.backgroundColor = "black"; 
 
    bstyle.color = "white"; 
 
    hello.innerText = "Have a good night!"; 
 
    } 
 
} 
 

 
setInterval(updateBackground, 1000 * 60); 
 
updateBackground();

.hello { 
 
    font-size: 4em; 
 
}

<div class="hello"></div>

Answer 2

JavaScriptにはいくつかの問題があります。ブラウザでコンソールを開いて、役立つエラーメッセージを表示してみてください。以下

修正されたコード：

<script> 
 
var t = new Date().getHours(); 
 

 
if (t < 10) { 
 
    document.write("Have a good morning!"); 
 
} else if (t < 20) { 
 
    document.write("Have a good day!"); 
 
} else { 
 
    document.write("Have a good night!"); 
 
} 
 
</script>

Answer 3

があなたのためにあなたの宿題を完了:)

var t = new Date().getHours(); 
 
if (t < 10) { 
 
    document.write("Have a good morning!"); 
 
    document.body.style.backgroundColor="yellow"; 
 
} else if (t < 20) { 
 
    document.write("Have a good evening!"); 
 
    document.body.style.backgroundColor="orange"; 
 
} else { 
 
    document.write("Have a good night!"); 
 
    document.body.style.backgroundColor="grey"; 
 
}

0123についての詳細をご覧くださいはjavaScriptの関数https://www.w3schools.com/jsref/jsref_gethours.asp

Answer 4

ここではjQueryを使用した簡単な例を示します。ここで

$(function() { 

    var current_date = new Date(); 
    var hour = current_date.getHours(); 

    if(hour < 10) { 
    $('body').addClass('day'); 
    } else { 
    $('body').addClass('midday'); 
    } 

}); 

https://codepen.io/Pauloscorps/pen/BmBGoe

Answer 5

var x = new Date().getHours(); 

if(x < 10){ 
// add background for morning 
} 



else if(x > 10 && x < 19){ 
// add background for day 
} 

else if(x > 19){ 
// add background for Night 
}