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 相关文章推荐
Javascript new关键字的玄机 以及其它
Aug 25 Javascript
JavaScript初学者需要了解10个小技巧
Aug 25 Javascript
jquery简单的拖动效果实现原理及示例
Jul 26 Javascript
javascript实现类似超链接的效果
Dec 26 Javascript
JavaScript与jQuery实现的闪烁输入效果
Feb 18 Javascript
动态加载js文件简单示例
Apr 21 Javascript
js前端面试题及答案整理(一)
Aug 26 Javascript
详解Angular系列之变化检测(Change Detection)
Feb 26 Javascript
微信小程序开发问题之wx.previewImage
Dec 25 Javascript
微信小程序实现pdf、word等格式文件上传的方法
Sep 10 Javascript
Vue-cli3项目引入Typescript的实现方法
Oct 18 Javascript
小程序外卖订单界面的示例代码
Dec 30 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生成短网址示例
2014/05/05 PHP
Yii框架参数配置文件params用法实例分析
2019/09/11 PHP
jQuery获取地址栏参数插件(模仿C#)
2010/10/26 Javascript
基于jquery循环map功能的代码
2011/02/26 Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
2012/03/01 Javascript
javascript 判断中文字符长度的函数代码
2012/08/27 Javascript
window.addEventListener来解决让一个js事件执行多个函数
2012/12/26 Javascript
基于JavaScript 下namespace 功能的简单分析
2013/07/05 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
2015/04/21 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
2017/12/24 Javascript
webpack优化的深入理解
2018/12/10 Javascript
jquery无缝图片轮播组件封装
2020/11/25 jQuery
websocket4.0+typescript 实现热更新的方法
2019/08/14 Javascript
原生js无缝轮播插件使用详解
2020/03/09 Javascript
微信小程序实现签到弹窗动画
2020/09/21 Javascript
全面解析Vue中的$nextTick
2020/12/24 Vue.js
python写入已存在的excel数据实例
2018/05/03 Python
对django的User模型和四种扩展/重写方法小结
2019/08/17 Python
Python实现非正太分布的异常值检测方式
2019/12/09 Python
Python __slots__的使用方法
2020/11/15 Python
Python 找出英文单词列表(list)中最长单词链
2020/12/14 Python
北卡罗来纳州豪华家具和家居装饰店:Carolina Rustica
2018/10/30 全球购物
Molton Brown美国官网:奢华美容、香水、沐浴和身体护理
2020/09/02 全球购物
Java中会存在内存泄漏吗,请简单描述
2016/12/22 面试题
环境工程大学生自荐信
2013/10/21 职场文书
办公室副主任职责范本
2014/03/08 职场文书
监督检查工作方案
2014/05/28 职场文书
食品工程专业求职信
2014/06/15 职场文书
幼儿园端午节活动方案
2014/08/25 职场文书
城管执法人员纪律作风整顿思想汇报
2014/09/13 职场文书
文员试用期转正自我鉴定
2014/09/14 职场文书
2014年学校领导班子对照检查材料
2014/09/19 职场文书
销售合作意向书范本
2015/05/08 职场文书
教师节随笔
2015/08/15 职场文书
Python如何把不同类型数据的json序列化
2021/04/30 Python
Python中npy和mat文件的保存与读取
2022/04/24 Python