JavaScript는 첫 번째 DOM의 그림을 두 번째 div에 무작위로 추가합니다. example

집

웹 프론트엔드

JS 튜토리얼

JavaScript는 첫 번째 DOM의 그림을 두 번째 div에 무작위로 추가합니다. example_javascript 기술

May 16, 2016 pm 05:20 PM

사진 추가 무작위의

JavaScript는 첫 번째 div에 있는 그림을 두 번째 div에 무작위로 추가합니다. 이 코드는 첫 번째 div에 있는 5개의 그림에서 두 개의 그림을 무작위로 추출하여 두 번째 div에 표시합니다.

코드 복사 코드는 다음과 같습니다.

 
<!DOCTYPE html PUBLIC "-/ /W3C/ /DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> .org/1999/xhtml"> 
< ;head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
< title>사진 5장 중 무작위로 표시 - Baidu 공간 테스트 그림용 그림</title> 
<script type="text/javascript"> 
window.onload = function () { 
var count=4 
var original=new Array ;//원본 배열
var tpDiv = document.getElementById('kstupian'); //dom 객체 가져오기
var Images = tpDiv.getElementsByTagName("img"); i<count;i ){original[i]=i;} 
original.sort(function(){ return 0.5 - Math.random( ); }) 
var myDiv = document.getElementById('myDiv '); //dom 객체 가져오기 
for (var i=0;i<2;i ){ 
var bigImg = document.createElement("img") //img 요소 생성 
 bigImg.width="200"; //px를 추가하지 않고 200픽셀 
bigImg.src=images.item(original[i]).src ; //img 요소의 src 속성에 값 할당 
 myDiv.appendChild(bigImg); //dom에 하위 요소 img 추가 

} 
</script> 🎜><body> 
<h2>첫 번째 div에는 5개의 사진이 있습니다</h2> 
<div id="kstupian"> .hiphotos.bdimg.com/album/s=1000;q=90/sign=2a369e6d918fa0ec7bc7600d16a7629f/b03533fa828ba61ee03594714134970a314e5990.jpg" width="2 00"> 
< img rc="http://c.hiphotos. bdimg.com/album/s=1000;q=90/sign=b03c3e4211dfa9ecf92e521752e0cc72/d058ccbf6c81800a5b37d550b13533fa838b4799.jpg" width="200"> 
<img src=" http://h .hiphotos.bdimg.com/ album/s=1000;q=90/sign=a4ff82aab74543a9f11bfecc2e27b1f3/203fb80e7bec54e721374640b9389b504ec26a90.jpg" width="200"> 
< img src="http:// g.hiphotos.bdimg.com /앨범/s= 1000;q=90/sign=cb1f8fa37b899e517c8e3e147297e242/b3119313b07eca809bdd65b9912397dda0448390.jpg" width="200"> 
< img src="http://a.hiphotos.bdimg.com/ 앨범/초=1000;q= 90/sign=fe1172bbad6eddc422e7b0fb09eb8d8c/5ab5c9ea15ce36d325dcdf6e3af33a87e850b190.jpg" width="200"> 
</div> 
<h2>첫 번째 div 이미지는 두 개의 무작위 비반복입니다. 사진</h2> <div id="myDiv" ></div> 
</body> 
</html>