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 相关文章推荐
最佳的addEvent事件绑定是怎样诞生的
Oct 24 Javascript
javascript模拟地球旋转效果代码实例
Dec 02 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
May 12 Javascript
jQuery代码性能优化的10种方法
Jun 21 Javascript
JavaScript面向对象编写购物车功能
Aug 19 Javascript
Ubuntu系统下Angularjs开发环境安装
Sep 01 Javascript
BootStrap便签页的简单应用
Jan 06 Javascript
Angular实现表单验证功能
Nov 13 Javascript
详解React native fetch遇到的坑
Aug 30 Javascript
webpack打包非模块化js的方法
Oct 24 Javascript
vsCode安装使用教程和插件安装方法
Aug 24 Javascript
详解vue页面首次加载缓慢原因及解决方案
Nov 06 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 模拟登陆MSN并获得用户信息
2009/05/16 PHP
基于AppServ,XAMPP,WAMP配置php.ini去掉警告信息(NOTICE)的方法详解
2013/05/07 PHP
实例讲解PHP设计模式编程中的简单工厂模式
2016/02/29 PHP
php数组冒泡排序算法实例
2016/05/06 PHP
php实现给二维数组中所有一维数组添加值的方法
2017/02/04 PHP
JS获取页面窗口大小的代码解读
2011/12/01 Javascript
jquery查找tr td 示例模拟
2014/05/08 Javascript
jquery获取一个元素下面相同子元素的个数代码
2014/07/31 Javascript
JavaScript动态修改网页元素内容的方法
2015/03/21 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
2016/07/14 Javascript
AngularJS基础 ng-src 指令简单示例
2016/08/03 Javascript
浅谈JavaScript中的this指针和引用知识
2016/08/05 Javascript
vue实现简单表格组件实例详解
2017/04/16 Javascript
input输入框内容实时监测(附代码)
2017/08/15 Javascript
微信小程序实现团购或秒杀批量倒计时
2020/11/01 Javascript
layui实现tab的添加拒绝重复的方法
2019/09/04 Javascript
ES5新增数组的实现方法
2020/05/12 Javascript
处理JavaScript值为undefined的7个小技巧
2020/07/28 Javascript
vue使用过滤器格式化日期
2021/01/20 Vue.js
在Python中使用列表生成式的教程
2015/04/27 Python
Python实现针对给定字符串寻找最长非重复子串的方法
2018/04/21 Python
python实现求特征选择的信息增益
2018/12/18 Python
python贪吃蛇游戏代码
2020/04/18 Python
Python OpenCV中的resize()函数的使用
2019/06/20 Python
python同时替换多个字符串方法示例
2019/09/17 Python
Ranorex通过Python将报告发送到邮箱的方法
2020/01/12 Python
Window系统下Python如何安装OpenCV库
2020/03/05 Python
通过python 执行 nohup 不生效的解决
2020/04/16 Python
CSS中几个与换行有关的属性简明总结
2014/04/15 HTML / CSS
HTML5本地存储之Web Storage应用介绍
2013/01/06 HTML / CSS
html5 http的轮询和Websocket原理
2018/10/19 HTML / CSS
英国最好的包装供应商:Priory Direct
2019/12/17 全球购物
迪士尼西班牙官方网上商店:ShopDisney西班牙
2020/02/02 全球购物
铲车司机岗位职责
2014/03/15 职场文书
婚假请假条格式及范文
2014/04/10 职场文书
2016暑期社会实践新闻稿
2015/11/25 职场文书