Question

我正在尝试根据星期几和一天中的时间改变背景。我在这里看到过类似的问题，但没有人给我任何关于我哪里出错的想法。

CSS：

    <style type="text/css">
    img.bg {
        min-height: 100%;
        min-width: 1024px;
        width: 100%;
        height: auto;
        position: fixed;
        top: 0;
        left: 0;
    }

    @media screen and (max-width: 1024px) {
        img.bg {
            left: 50%;
            margin-left: -512px;
        }
    }
</style>

脚本：

function setbkg(){
    var d = new Date(),
    w = d.getDay(),
    h = d.getHours(),
    i;
        if(w = 0) {
            if (h = 0 || h = 1 || h = 14 || h = 15) i = "img/one.png";
            else if (h = 2 || h = 3 || h = 6 || h = 7 || h = 20 || h = 22 || h = 23) i = "img/two.png";
            else i = "img/three.png";
        }
        else if(w = 1) {
            if (h = 0 || h = 1) i = "img/one.png";
            else if (h = 2 || h = 3 || h = 6 || h = 7) i = "img/two.png";
            else if (h = 12 || h = 13) i = "img/three.png";
            else if (h = 22 || h = 23) i = "img/four.png";
            else i = "img/five.png";
        }
        else if(w = 2 || w = 3 || w = 4 || w = 5) {
            if (h = 0 || h = 1 || h = 12 || h = 13) i = "img/one.png";
            else if (h = 2 || h = 3 || h = 6 || h = 7 || h = 22 || h = 23) i = "img/two.png";
            else i = "img/three.png";
        }
        else if(w = 6){
            if (h = 0 || h = 1) i = "img/one.png";
            else if (h = 2 || h = 3 || h = 6 || h = 7) i = "img/two.png";
            else if (h = 14 || h = 15) i = "img/three.png";
            else if (h = 20 || h = 22 || h = 23) i = "img/four.png";
            else i = "img/five.png";
        }
        else{ i = "i.imgur.com/wNOr5VU.png" }

        document.write('<img src="' + i + '" class="bg">');
    }

在头后，

<body onload="setbkg()">

我确信这是一种非常低效的尝试方法，但我仍然是初学者。现在，没有任何反应，我得到一个白色的屏幕。想法？

Answer 1

在您正在使用的每个if块中＆＃34; =＆＃34;运营商。它的赋值运算符。使用＆＃34; ==＆＃34;在每个if条件和你的代码都可以工作。

以下是您的代码的较小版本。并且它正常工作。我只是在index.html的同一目录中保存了两张图片。

<html>
<head>
    <title>test main</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
        img.bg {
            min-height: 100%;
            min-width: 1024px;
            width: 100%;
            height: auto;
            position: fixed;
            top: 0;
            left: 0;
        }

        @media screen and (max-width: 1024px) {
            img.bg {
                left: 50%;
                margin-left: -512px;
            }
        }
    </style>
    <script>
        function setbkg(){
            var d = new Date(),
            w = d.getDay(),
            h = d.getHours(),
            i;
            if(w == 3) {

                i = "body-img.jpg";

            }
            else{ i = "large.jpg" }

            document.write('<img src="' + i + '" class="bg">');
        }
    </script>
</head>
<body onload="setbkg()">

</body>
</html>

Answer 2

你不能在body onload中使用document.write。当它被调用时，文档已经被加载，那么它将在何处写入？（未定义...）

尝试一些dom操作，例如将img添加到div：

<div id="myBackground"></div>

var container = document.getElementById("myBackground");
container.innerHTML = '<img src="">';

根据时间和星期几改变背景？

CSS：

脚本：

2 个答案: