Question

如何在加载HTML page时创建随机背景？

我在HTML页面中有一个表格，我使用这行HTML代码为background制作Table。

<table background="image/1.jpg">

在Image folder我有5张图片，我想在每个HTML页面加载时随机更改背景。

Answer 1

这是一个仅使用Apache的解决方案。根本不需要脚本（客户端/服务器端）。

但是，对于此，您应该能够修改Apache配置以允许URL重写和重写映射。有关如何执行此操作的帮助，请参阅instructions。

完成初始配置后，您所要做的就是定义所有图像后缀（1,2,3 ......）的地图（images.txt）。然后，您配置apache以获取网址/images/random.jpg并随机将其替换为/images/image_1.jpg和/images/image_3.jpg等网址。

以下行可以转到httpd.conf，也可以将第二行单独放在.htaccess内。

RewriteMap images rnd:/path/to/images.txt
RewriteRule ^/(.*)images/random.jpg /images/image_${images:dynamic}.jpg

注意： RewriteMap定义不能在.htaccess内使用。但您可以在RewriteRule和主要配置中使用.htaccess指令。

地图内容。将images.txt放在上面RewriteMap指令中定义的路径中。

## images.txt

dynamic 1|2|3|4|5

当然，您必须将HTML更改为：

<table background="/images/random.jpg">

与脚本解决方案相比，这种拾取此类随机图像的方式非常简洁。我看到的唯一缺点是能够访问主Apache配置（httpd.conf，虚拟主机配置），以便将地图定义放在那里。许多共享托管公司都限制这样做。如果你能够克服这个障碍，那真的是一个蛋糕步行。

Answer 2

制作一个图像数组并设置页面参考example

的onload函数

Answer 3

您可以使用PHP：

$images = array();

if ($dir = opendir("your/image/folder"))
{
    while (false !== ($file = readdir($dir)))
    {
        if (preg_match('~(png)|(gif)|(jpg)|(jpeg)|(bmp)~', $file) > 0) // Use this to filter just images you want
        {
            $images[] = $file;
        }
    }
}

echo '<table background="image/' . $images[mt_rand(0, (count($images) - 1))] . '">';

Answer 4

以下是一些jQuery插件：

Answer 5

你可以使用javascript。使用Math.random（）函数并使其返回1到5之间的数字。然后只需将表格的背景更改为函数给出的数字。我不知道你应该怎么做html。

希望这有助于你。欢呼声。

Answer 6

正如adarshr在评论中指出的那样，在服务器端处理它可能更容易。

然而，如果你想在客户端做这件事，你可以试试这种javascript：

window.onload=function(){  
   var thediv=document.getElementById("yourid");  
   var imgarray = new Array("imageone.gif", "imagetwo.gif", imagethree.gif");  
   var spot =Math.floor(Math.random()* imgarry.length);  
   thediv.style.background="url("+imgarray[spot]+")";  
}

以下是博文中的another example

HTML表随机背景

6 个答案: