javascript隨機(jī)將第一個dom中的圖片添加到第二個div中示例
更新時間：2013年10月08日 17:47:01 作者：
此代碼的是一個簡單的例子，將第一個div中的五張圖片中，提取隨機(jī)兩張顯示到第二個div中，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下
javascript隨機(jī)將第一個dom中的圖片添加到第二個div中去，此代碼的是一個簡單的例子，將第一個div中的五張圖片中，提取隨機(jī)兩張顯示到第二個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>隨機(jī)顯示五張圖片里面的二張圖片-測試圖片用的百度空間圖片</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圖片為隨機(jī)不重復(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>隨機(jī)顯示五張圖片里面的二張圖片-測試圖片用的百度空間圖片</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圖片為隨機(jī)不重復(fù)的二張</h2>
<div id="myDiv" ></div>
</body>
</html>
您可能感興趣的文章:
- 基于JavaScript代碼實(shí)現(xiàn)隨機(jī)漂浮圖片廣告
- JSP隨機(jī)驗(yàn)證圖片如何制作
- javascript隨機(jī)顯示背景圖片的方法
- JavaScript實(shí)現(xiàn)隨機(jī)替換圖片的方法
- js鼠標(biāo)點(diǎn)擊圖片實(shí)現(xiàn)隨機(jī)變換圖片的方法
- js實(shí)現(xiàn)網(wǎng)頁隨機(jī)切換背景圖片的方法
- js 圖片隨機(jī)不定向浮動的實(shí)現(xiàn)代碼
- JavaScript 創(chuàng)建隨機(jī)數(shù)和隨機(jī)圖片
- javascript 隨機(jī)廣告代碼(圖片廣告)
- JS實(shí)現(xiàn)鼠標(biāo)移動到縮略圖顯示大圖的圖片放大效果
- 圖片上傳即時顯示縮略圖的js代碼
- JS實(shí)現(xiàn)頁面載入時隨機(jī)顯示圖片效果
相關(guān)文章
本文給大家詳細(xì)介紹下如何使用javascript來實(shí)現(xiàn)運(yùn)動效果，總結(jié)的十分全面，附上各種效果的詳細(xì)示例和演示圖，有需要的小伙伴可以參考下。2015-07-07
這篇文章主要介紹了JavaScript 高階函數(shù)的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)JavaScript，感興趣的朋友可以了解下2020-09-09
這篇文章主要介紹了JS獲得圖片alt信息的方法,涉及javascript獲取圖片元素及對應(yīng)alt屬性的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-04-04
泛型是靜態(tài)類型語言的基本特征，允許將類型作為參數(shù)傳遞給另一個類型、函數(shù)、或者其他結(jié)構(gòu)。TypeScript 支持泛型作為將類型安全引入組件的一種方式。這些組件接受參數(shù)和返回值，其類型將是不確定的，直到它在代碼中被使用2022-10-10
這篇文章主要給大家介紹了關(guān)于javascript刪除數(shù)組元素的七個方法，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用javascript具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
javascript相等運(yùn)算符與等同運(yùn)算符詳細(xì)介紹
不管是java、c++、php都有相等運(yùn)算符與等同運(yùn)算符，當(dāng)然javasript也不例外，下面介紹一下2013-11-11
JavaScript的Set數(shù)據(jù)結(jié)構(gòu)詳解
這篇文章主要為大家介紹了JavaScript的Set數(shù)據(jù)結(jié)構(gòu)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
這篇文章主要為大家展示了bootstrap多種樣式進(jìn)度條，默認(rèn)進(jìn)度條、條紋進(jìn)度條等，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
JavaScript實(shí)現(xiàn)簡單抽獎系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡單抽獎系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
JS/HTML5游戲常用算法之路徑搜索算法 隨機(jī)迷宮算法詳解【普里姆算法】
這篇文章主要介紹了JS/HTML5游戲常用算法之路徑搜索算法 隨機(jī)迷宮算法,結(jié)合實(shí)例形式詳細(xì)分析了針對迷宮游戲路徑搜索算法的普里姆算法相關(guān)原理、實(shí)現(xiàn)方法及操作注意事項(xiàng),需要的朋友可以參考下2018-12-12