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 相关文章推荐
一段非常简单的让图片自动切换js代码
Nov 10 Javascript
一直复略了的一个问题,关于表单重复提交
Feb 15 Javascript
为Yahoo! UI Extensions Grid增加内置的可编辑器
Mar 10 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
Jul 02 Javascript
设置checkbox为只读(readOnly)的两种方式
Oct 11 Javascript
基于jquery实现省市联动效果
Nov 23 Javascript
jQuery Validation Plugin验证插件手动验证
Jan 26 Javascript
JS验证输入的是否是数字及保留几位小数问题
May 09 Javascript
vue的列表交错过渡实现代码示例
May 05 Javascript
vue+express+jwt持久化登录的方法
Jun 14 Javascript
详解ES6 Promise的生命周期和创建
Aug 18 Javascript
AJAX实现指定部分页面刷新效果
Oct 16 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 Sql Server连接失败问题及解决办法
2009/08/07 PHP
php select,radio和checkbox默认选择的实现方法
2010/05/15 PHP
php禁止某ip或ip地址段访问的方法
2015/02/25 PHP
laravel5创建service provider和facade的方法详解
2016/07/26 PHP
JQuery的一些小应用收集
2010/03/27 Javascript
jQuery制作仿腾讯web qq用户体验桌面
2013/08/20 Javascript
jQuery动画特效实例教程
2014/08/29 Javascript
深入探究JavaScript中for循环的效率问题及相关优化
2016/03/13 Javascript
JS生成某个范围的随机数【四种情况详解】
2016/04/20 Javascript
Svg.js实例教程及使用手册详解(一)
2016/05/16 Javascript
jquery获取form表单input元素值的简单实例
2016/05/30 Javascript
jQuery如何封装输入框插件
2016/08/19 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
2017/02/13 Javascript
Vue+axios 实现http拦截及路由拦截实例
2017/04/25 Javascript
Angular2中select用法之设置默认值与事件详解
2017/05/07 Javascript
parabola.js抛物线与加入购物车效果的示例代码
2017/10/25 Javascript
微信小程序显示倒计时功能示例【测试可用】
2018/12/03 Javascript
微信小程序 轮播图实现原理及优化详解
2019/09/29 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
2020/07/27 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
2020/08/12 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
2020/10/28 Javascript
[51:29]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
python使用mysql数据库示例代码
2017/05/21 Python
Python3+django2.0+apache2+ubuntu14部署网站上线的方法
2018/07/07 Python
Python面向对象之类的定义与继承用法示例
2019/01/14 Python
python tkinter GUI绘制,以及点击更新显示图片代码
2020/03/14 Python
Python3.9.1中使用match方法详解
2021/02/08 Python
捷克购买家具网站:JENA nábytek
2020/03/19 全球购物
团支书的期末学习总结自我评价
2013/11/01 职场文书
物业公司采购员岗位职责
2013/12/31 职场文书
设计师个人求职信范文
2014/02/02 职场文书
简爱电影观后感
2015/06/10 职场文书
2016应届毕业生就业指导课心得体会
2016/01/15 职场文书
教你怎么用Python生成九宫格照片
2021/05/20 Python
python实现A*寻路算法
2021/06/13 Python
victoriaMetrics库布隆过滤器初始化及使用详解
2022/04/05 Golang