Question

所以我需要一些帮助。我有一个小的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 ..

我很抱歉我的英语不好。

Answer 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)) {

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

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

Answer 2

步骤1是为每种颜色指定一个数字，然后使用随机数来挑选颜色

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

}

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

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

3 个答案: