当前位置:编程学习 > JAVA >>

javascript随机将第一个dom中的图片添加到第二个div中去

javascript随机将第一个dom中的图片添加到第二个div中去,此代码的是一个简单的例子,将第一个div中的五张图片中,提取随机两张显示到第二个div中。
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<title>随机显示五张图片里面的二张图片-测试图片用的百度空间图片</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");   
        for (var i=0;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";  //200个像素 不用加px    
        bigImg.src=images.item(original[i]).src;   //给img元素的src属性赋值    
        myDiv.appendChild(bigImg);      //为dom添加子元素img    
}   
      
    };    
</script>     
</head>  
  
<body>  
<h2>第一个div图片为五张</h2>  
<div id="kstupian">  
<img src=/2013/1009/20131009101720666.jpg" width="200">  
<img src=/2013/1009/20131009101720789.jpg"  width="200">  
<img src=/2013/1009/20131009101720416.jpg"  width="200">  
<img src=/2013/1009/20131009101720500.jpg"  width="200">  
<img src=/2013/1009/20131009101720659.jpg"  width="200">  
</div>  
<h2>第一个div图片为随机不重复的二张</h2>  
<div id="myDiv" ></div>    
</body>  
</html>  

 


补充:web前端 , JavaScript ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,