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据option的value值快速设定初始的selected选项
Aug 13 Javascript
Jquery 实现Tab效果 思路是js思路
Mar 02 Javascript
js 跳出页面的frameset框架示例介绍
Dec 23 Javascript
JS操作CSS随机改变网页背景实现思路
Mar 10 Javascript
JavaScript中的迭代器和生成器详解
Oct 29 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
Jan 08 Javascript
jQuery Mobile操作HTML5的常用函数总结
May 17 Javascript
javascript实现的上下无缝滚动效果
Sep 19 Javascript
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
详解如何在微信小程序中愉快地使用sass
Jul 30 Javascript
JavaScript迭代器的含义及用法
Jun 21 Javascript
js微信分享接口调用详解
Jul 23 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面向对象全攻略 (十四) php5接口技术
2009/09/30 PHP
关于WordPress的SEO优化相关的一些PHP页面脚本技巧
2015/12/10 PHP
php cookie工作原理与实例详解
2016/07/18 PHP
从JavaScript的函数重名看其初始化方式
2007/03/08 Javascript
javascript入门·对象属性方法大总结
2007/10/01 Javascript
一个简单的jQuery插件制作 学习过程及实例
2010/04/25 Javascript
新发现一个骗链接的方法(js读取cookies)
2012/01/11 Javascript
javascript两种function的定义介绍及区别说明
2013/05/02 Javascript
如何实现修改密码时密码框显示保存到cookie的密码
2013/12/10 Javascript
js中数组(Array)的排序(sort)注意事项说明
2014/01/24 Javascript
jQuery实现div浮动层跟随页面滚动效果
2014/02/11 Javascript
js replace替换所有匹配的字符串
2014/02/13 Javascript
jquery做的一个简单的屏幕锁定提示框
2014/03/26 Javascript
深入理解JavaScript定时机制
2016/10/27 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
浅析 NodeJs 的几种文件路径
2017/06/07 NodeJs
VUE+elementui面包屑实现动态路由详解
2019/11/04 Javascript
[27:28]Ti4 冒泡赛第二天 iG vs NEWBEE 1
2014/07/15 DOTA
[02:47]2018年度DOTA2最佳辅助位选手4号位-完美盛典
2018/12/17 DOTA
python函数参数*args**kwargs用法实例
2013/12/04 Python
Python深入学习之特殊方法与多范式
2014/08/31 Python
python写日志封装类实例
2015/06/28 Python
Python模拟随机游走图形效果示例
2018/02/06 Python
python pandas 组内排序、单组排序、标号的实例
2018/04/12 Python
Python操作Oracle数据库的简单方法和封装类实例
2018/05/07 Python
代码详解django中数据库设置
2019/01/28 Python
Pyqt5如何让QMessageBox按钮显示中文示例代码
2019/04/11 Python
前端制作动画的几种方式(css3,js)
2016/12/12 HTML / CSS
Html5 APP中监听返回事件处理的方法示例
2018/03/15 HTML / CSS
罗技美国官网:Logitech美国
2020/01/22 全球购物
瑞士男士时尚网上商店:Babista
2020/05/14 全球购物
我的求职择业计划书
2014/04/04 职场文书
技能比武方案
2014/05/21 职场文书
详细的本科生职业生涯规划范文
2014/09/16 职场文书
2014幼儿园教师个人工作总结
2014/11/08 职场文书
2015年禁毒工作总结
2015/04/30 职场文书