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 相关文章推荐
关于 byval 与 byref 的区别分析总结
Oct 08 Javascript
javascript引用类型指针的工作方式
Apr 13 Javascript
Jsonp post 跨域方案
Jul 06 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
Dec 04 Javascript
JavaScript如何实现组合列表框中元素移动效果
Mar 01 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
Jun 03 Javascript
Google 地图API Map()构造器详解
Aug 06 Javascript
详解在Vue中通过自定义指令获取dom元素
Mar 04 Javascript
在knockoutjs 上自己实现的flux(实例讲解)
Dec 18 Javascript
JS 数组随机洗牌的实例代码
Sep 12 Javascript
Moment.js实现多个同时倒计时
Aug 26 Javascript
node中短信api实现验证码登录的示例代码
Jan 20 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
fckeditor上传文件按日期存放及重命名方法
2015/05/22 PHP
深入理解PHP内核(二)之SAPI探究
2015/11/10 PHP
优化WordPress中文章与评论的时间显示
2016/01/12 PHP
PHP根据session与cookie用户登录状态操作类的代码
2016/05/13 PHP
总结PHP中DateTime的常用方法
2016/08/11 PHP
php操作路径的经典方法(必看篇)
2016/10/04 PHP
Javascript 跨域访问解决方案
2009/02/14 Javascript
深入理解JavaScript定时机制
2010/10/29 Javascript
如何将一个String和多个String值进行比较思路分析
2013/04/22 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
2015/12/01 Javascript
jQuery简单注册和禁用全局事件的方法
2016/07/25 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
ES6中Iterator与for..of..遍历用法分析
2017/03/31 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
2017/06/13 Javascript
ES6学习教程之对象字面量详解
2017/10/09 Javascript
vue.js获得当前元素的文字信息方法
2018/03/09 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
2019/06/06 Javascript
利用JavaScript的Map提升性能的方法详解
2019/08/14 Javascript
bootstrap-table后端分页功能完整实例
2020/06/01 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
使用Python获取Linux系统的各种信息
2014/07/10 Python
python爬虫 线程池创建并获取文件代码实例
2019/09/28 Python
怎么快速自学python
2020/06/22 Python
MATLAB数学建模之画图汇总
2020/07/16 Python
Canvas实现贝赛尔曲线轨迹动画的示例代码
2019/04/25 HTML / CSS
html5拖拽应用记录及注意点
2020/05/27 HTML / CSS
S’well Bottle保温杯官网:绝缘不锈钢水瓶
2018/05/09 全球购物
科茨沃尔德家居商店:Scotts of Stow
2018/06/29 全球购物
如何写出高性能的JSP和Servlet
2013/01/22 面试题
VC++笔试题
2014/10/13 面试题
ktv总经理岗位职责
2014/02/17 职场文书
学历公证书范本
2014/04/09 职场文书
小学数学教学经验交流材料
2014/05/22 职场文书
应届生面试求职信
2014/07/02 职场文书
中学生民族团结演讲稿
2014/08/27 职场文书
一文弄懂MySQL索引创建原则
2022/02/28 MySQL