JavaScript로 무작위로 div에 이미지를 추가하는 방법은 무엇입니까?

-5

이것은 내 HTML 코드입니다. 매 리프레시마다 10 개 중 5 개 div에서 임의로 이미지를 설정하는 방법 이미지는 새로 고침 이미지마다 임의로 설정해야하며 다른 위치를 표시해야합니다. 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이 코드는 정말 감사합니다. 매우 감사합니다. ..... –

, 당신은 당신이 원하는 모든 것을 변경할 수 있습니다. 당신이 뭔가를 할 수

<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

안녕 실제로 나는 그래서 난 지금이 형제 고맙습니다 그래서 나에게 도움이 될 것입니다 매우 피곤이 마지막 일에서 여기 붙어있어, 매우 정말 감사합니다 ... –

안녕하세요, 당신은 내가 5 개의 다른 이미지를 가져 가면 나에게 제안 할 수 있습니까? 이미지를 함께 표시해야합니다 .... 모든 새로 고침에 나는 plz 도움이 이렇게 할 수 없습니다 .... –

때마다 사용되는 이러한 5 개의 이미지입니까? 이 5 개의 이미지는 임의의 순서로 표시됩니까? –

:
이 내 솔루션입니다. 나는 잘 모르겠다. 시도 해봐.

//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에 이미지를 추가하는 방법은 무엇입니까?

답변

관련 문제