javascript隨機將第一個dom中的圖片添加到第二個div中示例
更新時間：2013年10月08日 17:47:01 作者：
此代碼的是一個簡單的例子，將第一個div中的五張圖片中，提取隨機兩張顯示到第二個div中，具體實現(xiàn)如下，感興趣的朋友可以參考下
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;//原始數(shù)組
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"); //創(chuàng)建一個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="http://a.hiphotos.bdimg.com/album/s%3D1000%3Bq%3D90/sign=2a369e6d918fa0ec7bc7600d16a7629f/b03533fa828ba61ee03594714134970a314e5990.jpg" width="200">
<img src="http://c.hiphotos.bdimg.com/album/s%3D1000%3Bq%3D90/sign=b03c3e4211dfa9ecf92e521752e0cc72/d058ccbf6c81800a5b37d550b13533fa838b4799.jpg" width="200">
<img src="http://h.hiphotos.bdimg.com/album/s%3D1000%3Bq%3D90/sign=a4ff82aab74543a9f11bfecc2e27b1f3/203fb80e7bec54e721374640b9389b504ec26a90.jpg" width="200">
<img src="http://g.hiphotos.bdimg.com/album/s%3D1000%3Bq%3D90/sign=cb1f8fa37b899e517c8e3e147297e242/b3119313b07eca809bdd65b9912397dda0448390.jpg" width="200">
<img src="http://a.hiphotos.bdimg.com/album/s%3D1000%3Bq%3D90/sign=fe1172bbad6eddc422e7b0fb09eb8d8c/5ab5c9ea15ce36d325dcdf6e3af33a87e850b190.jpg" width="200">
</div>
<h2>第一個div圖片為隨機不重復(fù)的二張</h2>
<div id="myDiv" ></div>
</body>
</html>
復(fù)制代碼 代碼如下:
<!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;//原始數(shù)組
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"); //創(chuàng)建一個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="http://a.hiphotos.bdimg.com/album/s%3D1000%3Bq%3D90/sign=2a369e6d918fa0ec7bc7600d16a7629f/b03533fa828ba61ee03594714134970a314e5990.jpg" width="200">
<img src="http://c.hiphotos.bdimg.com/album/s%3D1000%3Bq%3D90/sign=b03c3e4211dfa9ecf92e521752e0cc72/d058ccbf6c81800a5b37d550b13533fa838b4799.jpg" width="200">
<img src="http://h.hiphotos.bdimg.com/album/s%3D1000%3Bq%3D90/sign=a4ff82aab74543a9f11bfecc2e27b1f3/203fb80e7bec54e721374640b9389b504ec26a90.jpg" width="200">
<img src="http://g.hiphotos.bdimg.com/album/s%3D1000%3Bq%3D90/sign=cb1f8fa37b899e517c8e3e147297e242/b3119313b07eca809bdd65b9912397dda0448390.jpg" width="200">
<img src="http://a.hiphotos.bdimg.com/album/s%3D1000%3Bq%3D90/sign=fe1172bbad6eddc422e7b0fb09eb8d8c/5ab5c9ea15ce36d325dcdf6e3af33a87e850b190.jpg" width="200">
</div>
<h2>第一個div圖片為隨機不重復(fù)的二張</h2>
<div id="myDiv" ></div>
</body>
</html>
您可能感興趣的文章:
相關(guān)文章
JavaScript?數(shù)組方法filter與reduce
這篇文章主要介紹了JavaScript?數(shù)組方法filter與reduce，在ES6新增的數(shù)組方法中，包含了多個遍歷方法，其中包含了用于篩選的filter和reduce2022-07-07
跨標簽頁通信是指在瀏覽器中的不同標簽頁之間進行數(shù)據(jù)傳遞和通信的過程,這篇文章為大家整理了幾個常見的跨標簽頁通信方式,感興趣的小伙伴可以了解下2023-10-10
這篇文章主要介紹了JS中的進制轉(zhuǎn)換以及作用的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-06-06
彈出層組件用于彈出一個覆蓋到頁面上的內(nèi)容，本文主要介紹了uniapp組件uni-popup彈出層的使用，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-03-03
Js+Dhtml:WEB程序員簡易開發(fā)工具包(預(yù)先體驗版)
Js+Dhtml:WEB程序員簡易開發(fā)工具包(預(yù)先體驗版)...2006-11-11
這篇文章主要介紹了JS實現(xiàn)圖片上傳多次上傳同一張不生效的處理方法,處理方法也很簡單，只要在刪除方法里置空input，具體實例代碼大家參考下本文2018-08-08
js實現(xiàn)C#的StringBuilder效果完整實例
這篇文章主要介紹了js實現(xiàn)C#的StringBuilder效果,以完整實例形式分析總結(jié)了js實現(xiàn)C#的StringBuilder效果的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了在css加載完畢后執(zhí)行后續(xù)代碼的方法,需要的朋友可以參考下2014-09-09
這篇文章主要為大家詳細介紹了JS制作網(wǎng)站吸頂條，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
JS表格組件神器bootstrap table詳解（強化版）
這篇文章主要以實例的方式為大家再次介紹了JS表格組件神器bootstrap table，bootstrap table界面采用扁平化的風格，用戶體驗比較好，更好兼容各種客戶端，需要了解更多bootstrap table的朋友可以參考下2016-05-05