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的一句代码实现表格的简单筛选
Jul 26 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
Dec 23 Javascript
Javascript中call和apply函数的比较和使用实例
Feb 03 Javascript
Bootstrap select实现下拉框多选效果
Dec 23 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
Mar 13 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
Sep 15 Javascript
详解Vuex中mapState的具体用法
Sep 28 Javascript
vscode下vue项目中eslint的使用方法
Jan 13 Javascript
JavaScript 处理树数据结构的方法示例
Jun 16 Javascript
vue实现短信验证码登录功能(流程详解)
Dec 10 Javascript
Javascript Web Worker使用过程解析
Mar 16 Javascript
JavaScript实现复选框全选功能
Apr 11 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 下载保存文件保存到本地的两种实现方法
2013/08/12 PHP
yii框架builder、update、delete使用方法
2014/04/30 PHP
YII路径的用法总结
2014/07/09 PHP
php解析xml方法实例详解
2015/05/12 PHP
js实现兼容IE6与IE7的DIV高度
2010/05/13 Javascript
IE下js调试工具Companion.JS
2010/10/15 Javascript
jQuery-Tools-overlay 使用介绍
2012/07/14 Javascript
js给dropdownlist添加选项的小例子
2013/03/04 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
2013/07/10 Javascript
使用delegate方法为一个tr标签加一个链接
2014/06/27 Javascript
jQuery制作可自定义大小的拼图游戏
2015/03/30 Javascript
jquery取消事件冒泡的三种方法(推荐)
2016/05/28 Javascript
给easyui datebox扩展一个清空的实例
2016/11/09 Javascript
Angular学习笔记之集成三方UI框架、控件的示例
2018/03/23 Javascript
JavaScript canvas仿代码流瀑布
2020/02/10 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
2020/04/13 Javascript
vue组件中节流函数的失效的原因和解决方法
2020/12/02 Vue.js
python练习程序批量修改文件名
2014/01/16 Python
python进阶教程之动态类型详解
2014/08/30 Python
跟老齐学Python之编写类之三子类
2014/10/11 Python
Linux环境下MySQL-python安装过程分享
2015/02/02 Python
Python读取Excel的方法实例分析
2015/07/11 Python
使用Python爬取最好大学网大学排名
2018/02/24 Python
Python对多属性的重复数据去重实例
2018/04/18 Python
python3 反射的四种基本方法解析
2019/08/26 Python
Python实现基于socket的udp传输与接收功能详解
2019/11/15 Python
Python+Kepler.gl实现时间轮播地图过程解析
2020/07/20 Python
python装饰器代码深入讲解
2021/03/01 Python
电厂厂长岗位职责
2014/01/02 职场文书
劲霸男装广告词
2014/03/21 职场文书
《庐山的云雾》教学反思
2014/04/22 职场文书
施工安全协议书范本
2014/09/26 职场文书
2015年幼儿园个人工作总结
2015/04/25 职场文书
安全第一课观后感
2015/06/18 职场文书
nginx配置ssl实现https的方法示例
2021/03/31 Servers
台式电脑蓝牙适配器怎么安装?台式电脑蓝牙适配器安装教程
2022/04/08 数码科技