Question

我正在尝试将某种代码整合在一起，以便在我的博客博客上随机化背景图片。

我的编程技巧很少，但我愿意尝试建议。

我记得在Wordpress中实现类似的，通过将一个php代码文件存储在图像文件夹中，然后在CSS中调用该php文件 - 就像它是一个图像一样。

但是从我读到的内容来看，博客不承认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变量下设置背景网址。

Here's .style对象的文档。

＆＃13;

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

＆＃13;

[更新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()下的一个图像的网址：

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()

最后解决你所说的问题：

背景图像是刷新时要加载的最后一个元素

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

window.onload = showBackground();

未解决（2016年12月30日18:48 - CET）

我目前没有Mac或Windows来测试或尝试修复：

它似乎不适用于Safari

但是，如果有人想帮助here，那就是我用来测试的博客。

博客

1 个答案: