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() +")" });

或 Object Literal 方式（jQuery）：

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

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

Answer 2

你走了：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>day/night dynamic background for user3329709</title>
    <style type="text/css">
        .day
        {
            background: url(http://miriadna.com/desctopwalls/images/max/Day-sky.jpg) no-repeat;
            width: 500px;
            height: 500px;
        }
        .night
        {
            background: url(http://growwhereyoureplanted.com/wp-content/uploads/2013/11/palmlixcom-night-sky-stars-background-psdgraphics.jpg) no-repeat;
            width: 500px;
            height: 500px;
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var currentTime = new Date().getHours();
            if (currentTime >= 7 && currentTime <= 15) {
                $("#background").addClass("day");
            } else {
                $("#background").addClass("night");
            }
        });
    </script>
</head>
<body>
    <div id="background" class="day">
    </div>
</body>
</html>

Answer 3

在js中添加样式标签是行不通的。但是既然你指定了jQuery，这是一个基本的例子......

    <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;       
    }

    .nighttime{
      background-image: url("bg_night.jpg");
    }
    </style>

在你的页脚中添加js

<script type="text/javascript">
    var currentTime = new Date().getHours();
    if (currentTime > 20) {
        $('body').addClass('nighttime');
    }
    </script>

Answer 4

Tnx的所有答案，但我解决了我的问题：

<script type="text/javascript">
<!--

        var now = new Date();
        var hours = now.getHours();
        var psj=0;
        document.write('<style type="text/css">')
        if (hours >= 6 && hours <= 20){
                document.write('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;}')
        }


        else{
                document.write('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;}')
        }
        document.write('<\/style>')

//-->
</script>

不同的背景取决于时间

4 个答案: