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


Posted in Javascript onOctober 08, 2013

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="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图片为随机不重复的二张</h2> 
<div id="myDiv" ></div> 
</body> 
</html>
Javascript 相关文章推荐
屏蔽Flash右键信息的js代码
Jan 17 Javascript
Jquery方式获取iframe页面中的 Dom元素
May 07 Javascript
JS控制TreeView的结点选择
Nov 11 Javascript
windows下vue-cli导入bootstrap样式
Apr 25 Javascript
ExtJs异步无法向外传值和赋值的完美解决办法
Jun 14 Javascript
微信小程序 转发功能的实现
Aug 04 Javascript
Easyui和zTree两种方式分别实现树形下拉框
Aug 04 Javascript
JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
Dec 01 Javascript
Vue官网todoMVC示例代码
Jan 29 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
Mar 12 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
May 09 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
Aug 03 Javascript
Firefox和IE兼容性问题及解决方法总结
Oct 08 #Javascript
JQuery中form验证出错信息的查看方法
Oct 08 #Javascript
jquery $(this).attr $(this).val方法使用介绍
Oct 08 #Javascript
Javascript表格翻页效果的具体实现
Oct 05 #Javascript
jquery next nextAll nextUntil siblings的区别介绍
Oct 05 #Javascript
jquery中animate动画积累的解决方法
Oct 05 #Javascript
jQuery.fn和jQuery.prototype区别介绍
Oct 05 #Javascript
You might like
php计算两个文件相对路径的方法
2015/03/14 PHP
php实现指定字符串中查找子字符串的方法
2015/03/17 PHP
Yii rules常用规则示例
2016/03/15 PHP
Laravel 模型使用软删除-左连接查询-表起别名示例
2019/10/24 PHP
jquery中常用的SET和GET
2009/01/13 Javascript
JQuery文本框高亮显示插件代码
2011/04/02 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
2013/07/05 Javascript
js的toLowerCase方法用法实例
2015/01/27 Javascript
javascript中callee与caller的区别分析
2015/04/20 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
2015/12/01 Javascript
原生的强大DOM选择器querySelector介绍
2016/12/21 Javascript
详解ES6 export default 和 import语句中的解构赋值
2019/05/28 Javascript
微信小程序缓存支持二次开发封装实现解析
2019/12/16 Javascript
微信小程序单选框自定义赋值
2020/05/26 Javascript
VUE Elemen-ui之穿梭框使用方法详解
2021/01/19 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
2020/11/06 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
2020/12/16 Javascript
Python中bisect的用法
2014/09/23 Python
关于python的list相关知识(推荐)
2017/08/30 Python
浅析python实现scrapy定时执行爬虫
2018/03/04 Python
python 机器学习之支持向量机非线性回归SVR模型
2019/06/26 Python
Python换行与不换行的输出实例
2020/02/19 Python
python实现低通滤波器代码
2020/02/26 Python
python目标检测给图画框,bbox画到图上并保存案例
2020/03/10 Python
Python3.9 beta2版本发布了,看看这7个新的PEP都是什么
2020/06/10 Python
Python如何重新加载模块
2020/07/29 Python
python 两种方法删除空文件夹
2020/09/29 Python
CSS3中使用RGBA设置透明度的示例
2015/08/04 HTML / CSS
html5使用canvas绘制太阳系效果
2014/12/15 HTML / CSS
瑞典轮胎在线:Tirendo.se
2018/06/21 全球购物
将一个文本文件的内容按倒序打印出来
2015/01/05 面试题
应届毕业生个人求职自荐信
2014/01/06 职场文书
刑事上诉状范文
2015/05/22 职场文书
优秀班主任工作总结2015
2015/05/25 职场文书
opencv-python图像配准(匹配和叠加)的实现
2021/06/23 Python
Win11 22H2 2022怎么更新? 获得Win1122H22022版本升级技巧
2022/09/23 数码科技