javascript - 不同的背景取决于时间

Question

我正在尝试根据时间制作两种不同的背景。日/夜背景。我对此进行了编程，但它不起作用...

<script type="text/javascript">
    var currentTime = new Date().getHours();
    if (7 <= currentTime && currentTime < 20) {

        <style>
        html, body {
        height: 100%;
        margin: 0;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 0;
        width: 100%;
        background-image: url("bg_day.jpg");
        background-repeat: no-repeat;
        background-position: center center;
        background-attachment: fixed;       
    }
        </style>
    }
    else {

         <style>
         html, body {
        height: 100%;
        margin: 0;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 0;
        width: 100%;
        background-image: url("bg_night.jpg");
        background-repeat: no-repeat;
        background-position: center center;
        background-attachment: fixed;       
    }
         </style>
    }
    </script>

有人可以帮帮我吗？

Answer 1

LIVE DEMO

保留您的 style里面<style> (或者更确切地说，在一个单独的 .css 文件中)它需要的地方......不要将它与 JS 混合。
使用:

<script>
    var currentTime = new Date().getHours();
    var day = 7 <= currentTime && currentTime < 20;
    document.body.style.backgroundImage = 'url('+ (day?"day.jpg":"night.jpg")+ ')';
</script>
</body>

在 jQuery 中看起来像:

var CTime = new Date().getHours();
$('body').css({backgroundImage:"url("+(CTime>=7&&CTime<20?"day.jpg":"night.jpg")+")"});

或者可读的方式:

function bgByTime(){
   var CTime = new Date().getHours();
   return  CTime >= 7 && CTime < 20 ?
     "day.jpg"   :
     "night.jpg" ;   
}
$('body').css({ backgroundImage: "url("+ bgByTime() +")" });

或对象文字方式(jQuery):

var ct  = new Date().getHours(),
    img = ct>=7&&ct<20 ? "day.jpg" : "night.jpg";
    bg  = {backgroundImage : "url("+ img +")"};

$('body').css(bg);