随机图片，2 个不同的 div [HTML,JavaScript]答案

【问题标题】：Random images, 2 different divs [HTML,JavaScript]随机图片，2 个不同的 div [HTML,JavaScript]
【发布时间】：2011-01-29 00:04:54
【问题描述】：

所以我需要一些帮助。我有一个小型 iphone 网站，我希望条形图（4 张图片）以相同的颜色随机排列。（就像一个主题）

就这样

Barred1.jpg , Barred2.jpg , Barred3.jpg Barred4.jpg
Barblue1.jpg , Barblue2.jpg , Barblue3.jpg Barblue4.jpg
Barpink1.jpg , Barpink.jpg , Barpink3.jpg Barpink4.jpg
Bargreen1.jpg , Bargreen2.jpg , Bargreen3.jpg Bargreen4.jpg

怎么做？

所有的栏都在不同的 div 上..

对不起，我的英语不好。

【问题讨论】：

标签： javascript html image random

【解决方案1】：

您可以让 JavaScript 随机选择一种颜色（使用 this technique），然后像这样处理页面上的所有图像：

var imgs = document.getElementsByTagName('img'),
i = imgs.length;
while (i) {
    i -= 1;

然后你可以像这样检查图像的src 属性：

    if (/^Bar([a-z]+)\.jpg/.test(imgs[i].src)) {

如果匹配，只需切换 src 与您的 JS 到达的颜色：

        imgs[i].src = 'Bar' + random_color + '.jpg';

【讨论】：

你能举个例子吗？

【解决方案2】：

第一步是为每种颜色分配一个数字，然后使用随机数选择颜色

var colors = new Array("red","blue","pink","green");

var random = Math.floor(Math.random()*4);

第 2 步是使用 for 循环将 img src 设置为颜色

for (var i=1; i < 5; i++){

document.getElementById("img"+i).src = "Bar"+colors[random]+i+".jpg";

}

【讨论】：

哦天哪..这里需要一些循环展开..不需要它（并不是说它真的那么重要；））

【解决方案3】：

使用 jquery：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>

var a = ['red', 'blue', 'pink', 'green'];

function setBarTheme(bar, idx)
{
$(bar).css('background-image', 'url(Bar' + a[idx] + '.jpg)');
}

$(document).ready(function(){

var r = Math.floor(Math.random()*4);

setBarTheme('#bar1', r);
setBarTheme('#bar2', r);
setBarTheme('#bar3', r);
setBarTheme('#bar4', r);

});


</script>
</head>
<body>

<div id="bar1"></div>
<div id="bar2"></div>
<div id="bar3"></div>
<div id="bar4"></div>

</body>
</html>

【讨论】：