博客上的随机背景图像 [英] random background image on blogger

问题描述

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

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

但是从我读的，博客不认识php，所以我想我会不得不尝试out a 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>`
  

我试过上面的但没有看到结果。

此外，文章是从2007年，我担心描述的方法可能已过时。

是否在< body> 标签的开头或者应该将其作为外部文件存储在某处？如果是这样，我应该如何从博客内部参考？从CSS中引用它是很容易的，但我不知道这是否可能。

任何帮助将非常感激。

解决方案

这是我会做的，但通常，我可以编辑，评论，改进和建议，如果有一种方法来使这个代码 - 和我 - 一个更好的一个。

所以你不是那么远原因实际上我的代码看起来有点像你的，但与抽象手动添加乘数到随机数字发生器。有了这一切，您只需要在 imageURLs 变量下设置背景网址即可。

这里是 .style 对象的文档。

 < script type =text / javascript ）{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：//壁纸.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 background（）[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>  

[UPDATE 1] / strong>

如果你有exemple 10张图片，那么改变 imageURLs p>

  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 c $ c>帮助：

  uniqueNumber = randomNumber（numberOfImages）; 
  

一旦我们有 uniqueNumber 要获取存储在函数 backgrounds（）下的一个图像的网址：

  return backgrounds（）[uniqueNumber]; 
  

[UPDATE 2]

要继续说明，您必须在< / html> 之前的模板HTML末尾添加脚本（只是测试它）。

[UPDATE 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 18:48 - CET）

我目前没有任何Mac或Windows与我一起测试或尝试修复：

它在Safari上似乎不起作用

想要帮助这里是我用来测试的博主。

I'm trying to pull together some kind of code that will randomize the background image on my blogger blog.

My programming skills are scant, but I'm willing to try suggestions out.

I remember achieving s/th similar in Wordpress, by having a file of php-code stored inside a folder of images and then calling that php file - as if it was an image - from within CSS.

But from what I read, blogger doesn't recognize php, so I guess I'll have to try out some 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>`

I've tried the above but seen no results.

Besides, the article is from 2007, and I fear the method described may be outdated.

What's more, I don't really know where to put it.

Is it at the beginning of the <body> tag or should it be stored somewhere as an external file? And if so, how should I reference it from inside blogger? It would be slick to reference it from within CSS, but I have no idea if this is possible.

Any help would be greatly appreciated.

解决方案

That is how I would do it but as usually, I'm open for edit, comments, ameliorations and suggestions if there's a way to make this code - and me - a better one.

So you wasn't that far cause actually my code look a bit like yours but with the abstraction of manually add the multiplier to the random number generator. With this all you have to do is to set your backgrounds URLs under the imageURLs variable.

Here's the documentation for the .style object.

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

[UPDATE 1]

If you have for exemple 10 pictures, then change imageURLs so it's should be something like

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"];

No need to add the number 10 (in this example) anywhere cause actually the following get it automatically:

var numberOfImages = backgrounds().length;

So in my example, the number 10 (number of pictures I have) which is now obtained is used to generate a random number in range [0,max] with max=10 in our example. So we get the random number with the help of the function :

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

We call it under showBackground() with the help of:

uniqueNumber = randomNumber(numberOfImages);

Once we have uniqueNumber, we use it to get the url of one image stored under the function backgrounds() with :

return backgrounds()[uniqueNumber];

[UPDATE 2]

To continue with explanations, you have to add the script at the end of the the template HTML just before </html> (just tested it).

[UPDATE 3]

To achieve what you wanted to do with :

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

we use the function showBackground()

And finaly to fix what you said which was:

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

I added the following to the script:

window.onload = showBackground();

---

Not solved (30/12/2016 18:48 - CET)

I currently have no mac or windows with me to test or to try to fix:

It doesn't seem to work on Safari

but if someone want to help here is the blogger I use to test.

这篇关于博客上的随机背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！