刷新时随机更改背景

Question

I am trying to make it so that when the page is visited or refreshed, the background changes. 我试图做到这一点，以便在访问或刷新页面时，背景发生变化。 I am trying to achieve this with JS. 我正在尝试使用JS实现这一目标。

This is the JS I currently have: 这是我目前拥有的JS：

<script type="text/javascript">
    var imgCount = 3;
    var dir = 'img/';
    var randomCount = Math.round(Math.random() * (imgCount - 1)) + 1;
    var images = new Array
            images[1] = "1.png",
            images[2] = "2.png",
            images[3] = "3.png",
    document.body.style.background = "url(" + dir + images[randomCount] + ")";
</script>

Along with the HTML: 连同HTML：

<html>
    <head> 
            <!-- The JS was here but didnt liek to be pasted -->
            <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="page">
            Rawr
        </div>
    </body>
</html>

And the CSS: 和CSS：

html, body {
background: no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}

#page {
width: 900px;
height: auto;
border: #900 1px solid;
border-radius: 5px; 
float: right;
margin-right: 20px;
}

My main problem is that images; 我的主要问题是图像； firstly - don't appear and secondly - I don't know if the script is working or not because of this. 首先-不出现，其次-我不知道脚本是否因此而起作用。

My file tree is as simple as a root directory and a folder named 'img' for images with 3 images, 1 - 3 that are png's. 我的文件树就像一个根目录和一个名为“ img”的文件夹一样简单，用于包含3张图像（1-3张）的png图像。

Please could someone help me establish why the background doesn't show up, if the code is actually working. 如果代码确实有效，请有人帮我确定为什么不显示背景。

Thanks. 谢谢。 Sorry if my posting is inadequate, I'm really not the best at this kind of thing =/ 抱歉，如果我的发帖不足，我真的不是这种事情的佼佼者= /

Answer 1

As adeneo said you should put your script after DOM is ready, something like 正如adeneo所说，您应该在DOM准备就绪后放入脚本，例如

Update 更新资料
For not repeat the background you should use this snippet of code. 为了避免重复背景，您应该使用此代码段。

document.body.style.backgroundRepeat = "no-repeat";

Full Code 完整代码

<html>
    <head> 
            <!-- The JS was here but didnt liek to be pasted -->
            <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="page">
            Rawr
        </div>
    <!-- put your script is here after dom is ready -->
    <script type="text/javascript">
        var imgCount = 3;
        var dir = 'img/';
        var randomCount = Math.round(Math.random() * (imgCount - 1)) + 1;
        var images = new Array
                images[1] = "1.png",
                images[2] = "2.png",
                images[3] = "3.png",
        document.body.style.background = "url(" + dir + images[randomCount] + ")";
        document.body.style.backgroundRepeat = "no-repeat"; 
        //----^----for not repeat the background
    </script>
    </body>
</html>

刷新时随机更改背景

问题描述

1 个解决方案

解决方案1
0 2014-03-09 16:31:29

刷新时随机更改背景

问题描述

1 个解决方案

解决方案1 0 2014-03-09 16:31:29

解决方案1
0 2014-03-09 16:31:29