Question

这是我的HTML代码。如何每次刷新10个中的5个div中随机设置图像;每个刷新图像应随机设置图像，并应显示不同的位置。我不明白我必须使用什么JavaScript。

<body>
 <div id="wrapper">
   <div id="pr-1">1</div>     
   <div id="pr-2">2</div>
   <div id="pr-3">3</div>
   <div id="pr-4">4</div>
   <div id="pr-5">5</div>
   <div id="pr-6">6</div> 
   <div id="pr-7">7</div>
   <div id="pr-8">8</div>
   <div id="pr-9"></div>
   <div id="pr-10"></div>
 </div>
</body>

CSS代码

#wrapper 
{
  background-color: #fe8181;
  width: 300px;
  height: 510px;
  padding: 5px;
} 
#pr-1, #pr-2, #pr-3, #pr-4, #pr-5, #pr-6, #pr-7, #pr-8, #pr-9, #pr-10 
{
  background-color: #fff;
  float: left;
  height: 70px;
  margin-bottom: 3px;
  margin-right: 3px;
  width: 72px;   
}

Answer 1

我使用Google徽标图片作为示例，您可以将其更改为您想要的所有内容这是我的解决方案：

<html>
<style>
    #wrapper 
    {
        background-color: #fe8181;
        width: 300px;
        height: 510px;
        padding: 5px;
    } 
    #pr-1, #pr-2, #pr-3, #pr-4, #pr-5, #pr-6, #pr-7, #pr-8, #pr-9, #pr-10
    {
        background-color: #fff;
        float: left;
        height: 70px;
        margin-bottom: 3px;
        margin-right: 3px;
        width: 72px;   
    }
</style>
<script language="javascript">
    var nos=new Array();
    function setImage()
    {
        var i=0,duplicate,max=5;
        while (i<max)
        {
            no=Math.floor(Math.random() * 10) + 1;
            duplicate=false;
            for (j=0;j<i;j++)
            {
            if (nos[j]==no)
            {
                duplicate=true;
                break;
            }
            }
            if (duplicate==false)
            {
                i++;
                nos[j]=no;
            }
        }
        for (x in nos)
        {
            var div=document.getElementById("pr-"+nos[x]);
            div.innerHTML=div.innerHTML+"<img src='https://ssl.gstatic.com/accounts/ui/logo_2x.png'>";
        }
    }
</script>
<body onload="setImage()">
<div id="wrapper">
<div id="pr-1">1</div>     
<div id="pr-2">2</div>
<div id="pr-3">3</div>
<div id="pr-4">4</div>
<div id="pr-5">5</div>
    <div id="pr-6">6</div> 
    <div id="pr-7">7</div>
    <div id="pr-8">8</div>
    <div id="pr-9">9</div>
    <div id="pr-10">10</div>
</div>
</body> 
</html>

Answer 2

你可以这样做。我不确定。试试吧。

 //your image coolection array.
 var array = [{
        'src':'shape.jpeg'},
        {'src':'WodRob.png'},
        {'your image'},
        {'your image'}
    ];

//function to randomize array images.

function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex ;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}
//This will randomize the array on page refresh.
window.addEvemtListner('load',shuffle,false);

Answer 3

检查这个小提琴FIDDLE

var limit = 5,
    amount = 5,
    lower_bound = 1,
    upper_bound = 10,
    unique_random_numbers = [];

if (amount > limit) limit = amount; //Infinite loop if you want more unique
                                    //Natural numbers than existemt in a
                                    // given range
while (unique_random_numbers.length < limit) {
    var random_number = Math.round(Math.random()*(upper_bound - lower_bound) + lower_bound);
    if (unique_random_numbers.indexOf(random_number) == -1) { 
        // Yay! new random number
        unique_random_numbers.push( random_number );
    }
}

var urllist=["http://upload.wikimedia.org/wikipedia/commons/c/cf/Eenbruinigherfstblad.jpg","http://upload.wikimedia.org/wikipedia/en/5/57/Canadian_maple_leaf_2.jpg","http://upload.wikimedia.org/wikipedia/commons/9/9d/Pear_Leaf.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg","10.jpg"];
//alert(unique_random_numbers);

for(var i = 0; i < unique_random_numbers.length; i++) {
    var a="<img width='45px' height='45px' id='"+(i+1)+"' src='"+urllist[unique_random_numbers[i]]+"' alt='image"+(unique_random_numbers[i])+"'/>";

  //  alert(a);

    $("#pr-"+unique_random_numbers[i]).html("");
    $("#pr-"+unique_random_numbers[i]).append(""+a);

}

如何使用JavaScript随机添加div中的图像？

3 个答案: