javascript隨機(jī)將第一個(gè)dom中的圖片添加到第二個(gè)div中示例
更新時(shí)間:2013年10月08日 17:47:01 作者:
此代碼的是一個(gè)簡(jiǎn)單的例子,將第一個(gè)div中的五張圖片中,提取隨機(jī)兩張顯示到第二個(gè)div中,具體實(shí)現(xiàn)如下,感興趣的朋友可以參考下
javascript隨機(jī)將第一個(gè)dom中的圖片添加到第二個(gè)div中去,此代碼的是一個(gè)簡(jiǎn)單的例子,將第一個(gè)div中的五張圖片中,提取隨機(jī)兩張顯示到第二個(gè)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ī)顯示五張圖片里面的二張圖片-測(cè)試圖片用的百度空間圖片</title>
<script type="text/javascript">
window.onload = function (){
var count=4;
var original=new Array;//原始數(shù)組
var tpDiv = document.getElementById('kstupian'); //獲得dom對(duì)象
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對(duì)象
for (var i=0;i<2;i++){
var bigImg = document.createElement("img"); //創(chuàng)建一個(gè)img元素
bigImg.width="200"; //200個(gè)像素 不用加px
bigImg.src=images.item(original[i]).src; //給img元素的src屬性賦值
myDiv.appendChild(bigImg); //為dom添加子元素img
}
};
</script>
</head>
<body>
<h2>第一個(gè)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>第一個(gè)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ī)顯示五張圖片里面的二張圖片-測(cè)試圖片用的百度空間圖片</title>
<script type="text/javascript">
window.onload = function (){
var count=4;
var original=new Array;//原始數(shù)組
var tpDiv = document.getElementById('kstupian'); //獲得dom對(duì)象
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對(duì)象
for (var i=0;i<2;i++){
var bigImg = document.createElement("img"); //創(chuàng)建一個(gè)img元素
bigImg.width="200"; //200個(gè)像素 不用加px
bigImg.src=images.item(original[i]).src; //給img元素的src屬性賦值
myDiv.appendChild(bigImg); //為dom添加子元素img
}
};
</script>
</head>
<body>
<h2>第一個(gè)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>第一個(gè)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)頁(yè)隨機(jī)切換背景圖片的方法
- js 圖片隨機(jī)不定向浮動(dòng)的實(shí)現(xiàn)代碼
- JavaScript 創(chuàng)建隨機(jī)數(shù)和隨機(jī)圖片
- javascript 隨機(jī)廣告代碼(圖片廣告)
- JS實(shí)現(xiàn)鼠標(biāo)移動(dòng)到縮略圖顯示大圖的圖片放大效果
- 圖片上傳即時(shí)顯示縮略圖的js代碼
- JS實(shí)現(xiàn)頁(yè)面載入時(shí)隨機(jī)顯示圖片效果
相關(guān)文章
JavaScript?數(shù)組方法filter與reduce
這篇文章主要介紹了JavaScript?數(shù)組方法filter與reduce,在ES6新增的數(shù)組方法中,包含了多個(gè)遍歷方法,其中包含了用于篩選的filter和reduce2022-07-07JavaScript中跨標(biāo)簽頁(yè)通信的常見(jiàn)方式
跨標(biāo)簽頁(yè)通信是指在瀏覽器中的不同標(biāo)簽頁(yè)之間進(jìn)行數(shù)據(jù)傳遞和通信的過(guò)程,這篇文章為大家整理了幾個(gè)常見(jiàn)的跨標(biāo)簽頁(yè)通信方式,感興趣的小伙伴可以了解下2023-10-10Js+Dhtml:WEB程序員簡(jiǎn)易開(kāi)發(fā)工具包(預(yù)先體驗(yàn)版)
Js+Dhtml:WEB程序員簡(jiǎn)易開(kāi)發(fā)工具包(預(yù)先體驗(yàn)版)...2006-11-11JS實(shí)現(xiàn)圖片上傳多次上傳同一張不生效的處理方法
這篇文章主要介紹了JS實(shí)現(xiàn)圖片上傳多次上傳同一張不生效的處理方法,處理方法也很簡(jiǎn)單,只要在刪除方法里置空input,具體實(shí)例代碼大家參考下本文2018-08-08js實(shí)現(xiàn)C#的StringBuilder效果完整實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)C#的StringBuilder效果,以完整實(shí)例形式分析總結(jié)了js實(shí)現(xiàn)C#的StringBuilder效果的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-12-12JS表格組件神器bootstrap table詳解(強(qiáng)化版)
這篇文章主要以實(shí)例的方式為大家再次介紹了JS表格組件神器bootstrap table,bootstrap table界面采用扁平化的風(fēng)格,用戶體驗(yàn)比較好,更好兼容各種客戶端,需要了解更多bootstrap table的朋友可以參考下2016-05-05