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面向对象之Javascript 继承
May 04 Javascript
jquery固定底网站底部菜单效果
Aug 13 Javascript
js 数值转换为3位逗号分隔的示例代码
Feb 19 Javascript
js中的for如何实现foreach中的遍历
May 31 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
Mar 25 Javascript
Bootstrap CSS组件之导航(nav)
Dec 17 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
Jul 04 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
Aug 09 Javascript
原生JS+HTML5实现的可调节写字板功能示例
Aug 30 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
Nov 15 Javascript
微信小程序图片加载失败时替换为默认图片的方法
Dec 09 Javascript
JavaScript实现密码强度实时验证
Mar 18 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的魔术方法__get()和__set()使用介绍
2012/09/19 PHP
ThinkPHP快速入门实例教程之数据分页
2014/07/01 PHP
Javascript与PHP验证用户输入URL地址是否正确
2014/10/09 PHP
使用laravel和ajax实现整个页面无刷新的操作方法
2019/10/03 PHP
给Function做的OOP扩展
2009/05/07 Javascript
JavaScript 动态创建VML的方法
2009/10/14 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
2013/11/08 Javascript
JS iFrame加载慢怎么解决
2016/05/13 Javascript
浅析jquery数组删除指定元素的方法:grep()
2016/05/19 Javascript
bootstrap提示标签、提示框实现代码
2016/12/28 Javascript
微信小程序 密码输入(源码下载)
2017/06/27 Javascript
原生js获取left值和top值的三种方法
2017/08/02 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
2018/06/29 Javascript
vue实现div拖拽互换位置
2020/07/29 Javascript
Nodejs技巧之Exceljs表格操作用法示例
2019/11/06 NodeJs
bootstrap-closable-tab可实现关闭的tab标签页插件
2020/08/09 Javascript
[01:23:24]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第三场 2月7日
2021/03/11 DOTA
使用Python的Twisted框架实现一个简单的服务器
2015/04/16 Python
Python标准库defaultdict模块使用示例
2015/04/28 Python
Mac中升级Python2.7到Python3.5步骤详解
2017/04/27 Python
Python数据结构与算法之字典树实现方法示例
2017/12/13 Python
如何用Python实现简单的Markdown转换器
2018/07/16 Python
Python线程下使用锁的技巧分享
2018/09/13 Python
python+opencv实现阈值分割
2018/12/26 Python
Python对象与引用的介绍
2019/01/24 Python
Pandas中Series和DataFrame的索引实现
2019/06/27 Python
pyhton中__pycache__文件夹的产生与作用详解
2019/11/24 Python
Python csv文件记录流程代码解析
2020/07/16 Python
Python pathlib模块使用方法及实例解析
2020/10/05 Python
Python之qq自动发消息的示例代码
2021/02/18 Python
Canvas在超级玛丽游戏中的应用详解
2021/02/06 HTML / CSS
联想印度官方网上商店:Lenovo India
2019/08/24 全球购物
教师专业自荐书范文
2014/02/10 职场文书
单位委托书范本
2014/04/04 职场文书
2014年前台个人工作总结
2014/11/14 职场文书
python开发人人对战的五子棋小游戏
2022/05/02 Python