Случайные изображения, 2 разных элемента [HTML, JavaScript] - PullRequest
Новая
       3

Случайные изображения, 2 разных элемента [HTML, JavaScript]

0 голосов
/ 29 января 2011

так что мне нужна помощь.У меня есть небольшой сайт 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

Как это сделать?

Все бары находятся на разных делениях ..

I 'извините за мой плохой английский.

Ответы [ 3 ]

0 голосов
/ 29 января 2011

шаг 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";

}
0 голосов
/ 29 января 2011

Использование 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>
0 голосов
/ 29 января 2011

Вы можете сделать так, чтобы JavaScript произвольно выбирал цвет (используя эту технику ), а затем обрабатывал все изображения на странице следующим образом: 

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';
...