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中的事件处理详细介绍
Jun 24 Javascript
jquery复选框多选赋值给文本框的方法
Jan 27 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
Aug 26 Javascript
js跨域请求数据的3种常用的方法
Dec 01 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
Apr 11 Javascript
Vue form 表单提交+ajax异步请求+分页效果
Apr 22 Javascript
JS实现div模块的截图并下载功能
Oct 17 Javascript
在vue中实现简单页面逆传值的方法
Nov 27 Javascript
vue实现文字加密功能
Sep 27 Javascript
json字符串对象转换代码实例
Sep 28 Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
Oct 02 Javascript
原生JS实现弹幕效果的简单操作指南
Nov 10 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
vBulletin HACK----关于排版的两个HACK
2006/10/09 PHP
PHP 飞信好友免费短信API接口开源版
2010/07/22 PHP
PHP的消息通信机制测试实例
2016/11/10 PHP
PHP _construct()函数讲解
2019/02/03 PHP
javascript比较文档位置
2008/04/08 Javascript
文本框根据输入内容自适应高度的代码
2011/10/24 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
2012/05/20 Javascript
JS删除数组元素的函数介绍
2013/03/27 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
2015/03/20 Javascript
javascript异步处理工作机制详解
2015/04/13 Javascript
学习JavaScript事件流和事件处理程序
2016/01/25 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
2017/02/14 Javascript
Vue中的scoped实现原理及穿透方法
2018/05/15 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
2019/02/21 Javascript
Vue开发Html5微信公众号的步骤
2019/04/11 Javascript
javascript实现移动端红包雨页面
2020/06/23 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
2020/07/21 Javascript
javascript实现移动端触屏拖拽功能
2020/07/29 Javascript
Vue解决echart在element的tab切换时显示不正确问题
2020/08/03 Javascript
vue接通后端api以及部署到服务器操作
2020/08/13 Javascript
[03:18]DOTA2亚洲邀请赛小组赛第一日 RECAP赛事回顾
2015/01/30 DOTA
[01:14:31]Secret vs VG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
python语言使用技巧分享
2016/05/31 Python
python django使用haystack:全文检索的框架(实例讲解)
2017/09/27 Python
Python实现简单层次聚类算法以及可视化
2019/03/18 Python
python自动化测试之如何解析excel文件
2019/06/27 Python
Python通过yagmail实现发送邮件代码解析
2020/10/27 Python
举例详解HTML5中使用JSON格式提交表单
2015/06/16 HTML / CSS
英国团购网站:Groupon英国
2017/11/28 全球购物
英国露营设备和户外服装购物网站:Simply Hike
2019/05/05 全球购物
维氏瑞士军刀英国网站:Victorinox英国
2019/07/04 全球购物
汽车驾驶求职信
2013/10/25 职场文书
大学生怎样写好自荐信
2014/02/25 职场文书
导师评语大全
2014/04/26 职场文书
小学优秀辅导员事迹材料
2014/05/11 职场文书
Java 在线考试云平台的实现
2021/11/23 Java/Android