我正在尝试将某种代码组合在一起，使我的博主博客上的背景图片随机化。
我的编程技能不足，但我愿意尝试建议。
我记得在 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 中引用它会很巧妙，但我不知道这是否可能。
如有任何帮助，我们将不胜感激。
最佳答案
这就是我会做的，但像往常一样，如果有办法让这段代码——以及我——变得更好，我愿意接受编辑、评论、改进和建议。
所以您并没有那么远，因为实际上我的代码看起来有点像您的代码，但是抽象了手动将乘数添加到随机数生成器。有了这个，您所要做的就是在 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() 下的一个图像的 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();
未解决(2016 年 12 月 30 日 18:48 - CET)
我目前没有 mac 或 windows 可以测试或尝试修复:
It doesn't seem to work on Safari
但如果有人想帮忙here是我用来测试的博主。
关于javascript - 博客上的随机背景图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41321500/