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

-5

这是我的HTML代码。如何在每10次刷新的10个分区中随机设置图像;图像应该随机设置每个刷新图像，并应显示不同的地方。我不明白我必须使用什么JavaScript。如何使用JavaScript随机添加div中的图像？

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

来源

2014-12-04 Dev Upadhyay

检查此琴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); 

}

来源

2014-12-04 07:11:56

非常感谢Atul这段代码非常感谢你，非常感谢你..... – 2014-12-04 12:17:49

我使用谷歌的标志形象，例如，你可以把它改成你想要的一切。
这是我的解决方案：

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

来源

2014-12-04 07:09:55

你好非常感谢你真的，其实我卡在这里，从最后的日子，所以我觉得很累，现在这将帮助我，所以感谢名单兄弟... – 2014-12-04 07:43:18

嗨，你可以请建议我，如果我采取5个不同的图像，而不是同一个。和图像不应该一起显示....在每一次刷新，但我无法做到这一点，所以PLZ帮助PLZ .... – 2014-12-04 10:02:10

这5个图像每次都使用？这5张图片以随机顺序显示？ – 2014-12-04 10:07:37

你可以做这样的事情。我不确定。尝试一下。

//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);

来源

2014-12-04 07:11:47 Ved

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

回答

相关问题