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 相关文章推荐
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
Apr 08 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
Nov 30 Javascript
javascript中if和switch,==和===详解
Jul 30 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
Dec 10 Javascript
jQuery Mobile中的button按钮组件基础使用教程
May 23 Javascript
基于js中的原型(全面讲解)
Sep 19 Javascript
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
原生JS实现网页手机音乐播放器 歌词同步播放的示例
Feb 02 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
May 01 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
Nov 04 Javascript
JavaScript使用canvas绘制随机验证码
Feb 17 Javascript
使用 UniApp 实现小程序的微信登录功能
Jun 09 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&amp;java(一)
2006/10/09 PHP
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
2011/07/26 Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
2013/01/20 Javascript
jquery 按钮状态效果 正常、移上、按下
2013/08/12 Javascript
使用VS开发 Node.js指南
2015/01/06 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
2016/03/01 Javascript
js学习总结之dom2级事件基础知识详解
2017/07/27 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
2018/09/13 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
2019/08/01 Javascript
基于Vue和Element-Ui搭建项目的方法
2019/09/06 Javascript
vue基于Echarts的拖拽数据可视化功能实现
2020/12/04 Vue.js
[02:22]2018DOTA2亚洲邀请赛VG赛前采访
2018/04/03 DOTA
python使用urllib2模块获取gravatar头像实例
2013/12/18 Python
python中如何使用正则表达式的非贪婪模式示例
2017/10/09 Python
Python自定义函数定义,参数,调用代码解析
2017/12/27 Python
Python使用matplotlib绘制余弦的散点图示例
2018/03/14 Python
Linux下python3.6.1环境配置教程
2018/09/26 Python
python接口自动化(十六)--参数关联接口后传(详解)
2019/04/16 Python
Python3.5常见内置方法参数用法实例详解
2019/04/29 Python
Python/Django后端使用PIL Image生成头像缩略图
2019/04/30 Python
python占位符输入方式实例
2019/05/27 Python
python3 深浅copy对比详解
2019/08/12 Python
Python3.7.0 Shell添加清屏快捷键的实现示例
2020/03/23 Python
关于keras中keras.layers.merge的用法说明
2020/05/23 Python
python交互模式基础知识点学习
2020/06/18 Python
python3 使用ssh隧道连接mysql的操作
2020/12/05 Python
python中count函数知识点浅析
2020/12/17 Python
司机岗位职责
2013/11/15 职场文书
女大学生自我鉴定
2013/12/09 职场文书
总经理秘书岗位职责
2014/03/17 职场文书
《鲁班和橹板》教学反思
2014/04/27 职场文书
个人工作主要事迹
2014/05/08 职场文书
市级优秀班主任事迹材料
2014/05/13 职场文书
小学生竞选班干部演讲稿(5篇)
2014/09/12 职场文书
鸡毛信观后感
2015/06/11 职场文书
2016年教师师德师风心得体会
2016/01/12 职场文书