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实现的一个include函数
Jul 21 Javascript
再论Javascript下字符串连接的性能
Mar 05 Javascript
js将当前时间格式转换成时间搓(自写)
Sep 26 Javascript
jQuery产品间断向下滚动效果核心代码
May 08 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
Mar 06 Javascript
浅谈Node.js 子进程与应用场景
Jan 24 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
Nov 27 Javascript
vue过滤器用法实例分析
Mar 15 Javascript
世界上最短的数字判断js代码
Sep 09 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
Mar 23 Javascript
Node.js API详解之 dgram模块用法实例分析
Jun 05 Javascript
jQuery实现影院选座订座效果
Apr 13 jQuery
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实现的css文件背景图片下载器代码
2014/11/11 PHP
浅谈PHP各环境下的伪静态配置
2019/03/13 PHP
PHP单例模式数据库连接类与页面静态化实现方法
2019/03/20 PHP
关于PHP中interface的用处详解
2020/07/26 PHP
PHP rsa加密解密算法原理解析
2020/12/09 PHP
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
2012/03/01 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
2013/01/16 Javascript
jquery.validate的使用说明介绍
2013/11/12 Javascript
javascript中的throttle和debounce浅析
2014/06/06 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
2015/06/24 Javascript
js操作数据库实现注册和登陆的简单实例
2016/05/26 Javascript
angular2 组件之间通过service互相传递的实例
2018/09/30 Javascript
vue-cli3全面配置详解
2018/11/14 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
2018/11/15 Javascript
详解jQuery-each()方法
2019/03/13 jQuery
js实现直播点击飘心效果
2020/08/19 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
2020/11/07 Javascript
pycharm远程调试openstack代码
2017/11/21 Python
PyQt5每天必学之工具提示功能
2018/04/19 Python
详解Python下ftp上传文件linux服务器
2018/06/21 Python
python实现五子棋游戏
2019/06/18 Python
python将unicode和str互相转化的实现
2020/05/11 Python
Python3 用什么IDE开发工具比较好
2020/11/28 Python
英国折扣零售连锁店:QD Stores
2018/12/08 全球购物
全球最大的瓷器、水晶和银器零售商:Replacements
2020/06/15 全球购物
百度软件工程师职位
2013/02/14 面试题
人力资源管理专业学生自我评价
2013/11/20 职场文书
公益广告语集锦
2014/03/13 职场文书
房产委托公证书
2014/04/08 职场文书
购房协议书范本
2014/10/02 职场文书
学前班教学反思
2016/02/24 职场文书
Mysql数据库命令大全
2021/05/26 MySQL
python状态机transitions库详解
2021/06/02 Python
Vue + iView实现Excel上传功能的完整代码
2021/06/22 Vue.js
Python Django获取URL中的数据详解
2021/11/01 Python
Python+Selenium自动化环境搭建与操作基础详解
2022/03/13 Python