博客上的随机背景图片

Question

我正在尝试编写某种代码，使我的博主博客上的背景图片随机化。

我的编程能力很差，但我愿意尝试建议。

我记得在 Wordpress 中实现了类似的 s/th，方法是将 php 代码文件存储在图像文件夹中，然后调用该 php 文件 - 就好像它是图像 - 来自 CSS.

但是根据我的阅读，博主不认识 php，所以我想我必须尝试一些 javascript (?)

<script type="text/javascript">
var image= new Array()
image[0]="Image01URL"
image[1]="Image02URL"
image[2]="Image03URL"
image[3]="Image04URL"
image[4]="Image05URL"
var random=Math.floor(5*Math.random());
document.write("<style>");
document.write("body {");
document.write(' background:url("' + image[random] + '") no-repeat fixed center center;');
document.write(" }");
document.write("</style>");
</script>`

我已经尝试了上面的方法，但没有看到任何结果。

此外，the article是2007年的，我担心描述的方法可能已经过时了。

而且，我真的不知道该把它放在哪里

它是在 <body> 标记的开头还是应该作为外部文件存储在某个地方？如果是这样，我应该如何从博主内部引用它？从 CSS 中引用它会很巧妙，但我不知道这是否可能。

如有任何帮助，我们将不胜感激。

Answer 1

这就是我的做法，但像往常一样，如果有办法让这段代码——以及我——变得更好，我愿意接受编辑、评论、改进和建议。

所以你并没有那么远，因为实际上我的代码看起来有点像你的代码，但是抽象了手动将乘数添加到随机数生成器。有了这个，您所要做的就是在 imageURLs 变量下设置您的背景 URL。

Here's .style 对象的文档。

    <script type="text/javascript">
function backgrounds() {
    var imageURLs = ["https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-301322.jpg", "https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-103541.jpg", "https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-279000.jpg", "https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-106689.jpg", "https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-365847.jpg", "https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-284161.jpg"];
    return imageURLs;
}

function randomNumber(max) {
    return Math.floor((Math.random() * max));
}

function getBackground() {
    var numberOfImages = backgrounds().length,
        uniqueNumber = randomNumber(numberOfImages);
    return backgrounds()[uniqueNumber];
}

function showBackground() {
    document.body.style.backgroundImage = "url('" + getBackground() + "')";
    document.body.style.backgroundPosition = "center center";
    document.body.style.backgroundRepeat = "no-repeat";
    document.body.style.backgroundAttachment = "fixed";
}
window.onload = showBackground();
    </script>

[更新 1]

例如，如果您有 10 张图片，请将 imageURLs 更改为

var imageURLs = ["http://img1.jpg","http://img2.jpg","http://img3.jpg","http://img4.jpg","http://img5.jpg","http://img6.jpg","http://img7.jpg","http://img8.jpg","http://img9.jpg","http://img10.jpg"];

无需在任何地方添加数字 10（在此示例中），因为实际上以下内容会自动获取它：

var numberOfImages = backgrounds().length;

所以在我的例子中，现在得到的10(我有的图片数量)是用来生成一个随机的在我们的例子中 [0,max] 和 max=10 范围内的数字。所以我们在函数的帮助下得到了随机数：

function randomNumber(max) {
  return Math.floor((Math.random() * max));
}

我们在 showBackground() 的帮助下调用它：

uniqueNumber = randomNumber(numberOfImages);

一旦我们有了 uniqueNumber，我们就用它来获取存储在函数 backgrounds() 下的 one 图像的 url ：

return backgrounds()[uniqueNumber];

[更新 2]

要继续解释，您必须在模板 HTML 的末尾添加脚本，就在 </html> 之前（刚刚测试过）。

[更新 3]

实现你想做的事情:

document.write("<style>");
document.write("body {");
document.write(' background:url("' + image[random] + '") no-repeat fixed center center;');
document.write(" }");
document.write("</style>");

我们使用函数showBackground()

最后修正你所说的是：

The background image is the very last element to be loaded upon refresh

我在脚本中添加了以下内容：

window.onload = showBackground();

未解决（30/12/2016 18:48 - CET）

我目前没有 mac 或 windows 可以测试或尝试修复：

It doesn't seem to work on Safari

不过如果有人想帮忙here是我用来测试的博主

博客上的随机背景图片

random background image on blogger

html

javascript

css

blogger

background-image