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随机将第一个dom中的图片添加到第二个div中去的更多相关文章

  1. 在页面上绘制一张表格，使用 DOM 节点的动态添加和删除向表格中插入数据，点击表格每行后的“删除”超链接

    查看本章节 查看作业目录 需求说明: 在页面上绘制一张表格,使用 DOM 节点的动态添加和删除向表格中插入数据,点击表格每行后的"删除"超链接,使用 DOM 节点的删除操作将对应的 ...

  2. .Net中把图片等文件放入DLL中，并在程序中引用

    原文:.Net中把图片等文件放入DLL中,并在程序中引用 [摘要] 有时我们需要隐藏程序中的一些资源,比如游戏,过关后才能看到图片,那么图片就必须隐藏起来,否则不用玩这个游戏就可以看到你的图片了,呵呵 ...

  3. 怎样将word中的图片插入到CSDN博客中

    目前大部分的博客作者在用Word写博客这件事情上都会遇到以下3个痛点: 1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.使用Word写 ...

  4. Servlet从本地文件中读取图片，并显示在页面中

    import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpSer ...

  5. 使用VBA从工作表中读图片，以及给工作表中写文件

    因为工作的原因,需要用到VBA,碰到读图片和写图片: Sub Macro01() '从工作表中保存图片 Application.ScreenUpdating = False Dim pth, shp, ...

  6. div中粘贴图片并上传服务器 div中拖拽图片文件并上传服务器

    应用简介:此文主要是描述如何在前端div中直接ctrl+v 粘贴图片,并上传到服务器,包括拖拽图片文件到div中 应用场景描述:用QQ或者其它切图软件截图,在指定的div中ctrl+v 粘贴并显示,点 ...

  7. VS2010中 为图片添加背景图片

    很简单的东西,嘿嘿 void CTestDlg::OnPaint() { if (IsIconic()) { CPaintDC dc(this); // 用于绘制的设备上下文 SendMessage( ...

  8. 图片过大，在div中不压缩的居中方法

    在图片全屏轮播时,为了兼容更大的屏幕,我们常常把图片设置为很大,但是在显示的过程中,如果让图片随浏览器自动变化的话,常常会把图片压缩变形,影响显示,在不压缩图片的情况下,如何只显示图片的中间部分呢? ...

  9. 将数据表中的数据添加到ComboBox控件中

    实现效果: 知识运用: ComboBox控件的DataSource 属性 //获取或设置ComboBox的数据源 public Object DataResouce{get;set;} //属性值:任 ...

随机推荐

  1. 解决vim不能使用方向键和退格键问题

    1.使用vi命令时,不能正常编辑文件,使用方向键时老是出现很多字母,或者退格键却变成方向键的功能 只要重装一下vi的依赖包即可完美解决vi编辑器方向键变字母的问题.rpm -e vim-enhance ...

  2. MySQL命令行下查看运行状态

    查看MySQL的运行状态用命令行的show语句show status是查看MySQL运行情况,和上面那种通过pma查看到的信息基本类似. show variables是查看MySQL的配置参数,还可以 ...

  3. 用html/css做的一个登入小界面（图片瀑布流）

    一个登入效果简易图:(色彩搭配有点乱,嘻嘻,可以在代码处改成自己喜欢的颜色) css样式的代码: style.css: @charset "utf-8";/* CSS Docume ...

  4. Chess---->简单命令框象棋（人VS人）

    简单粗暴,直接先上代码: ChessBoard.h:  1 #ifndef CHESBOARD_H  2 #include<iostream>  3 #include<string& ...

  5. Cocos2dx开发（2）——Win8.1下Cocod2dx 3.2环境搭建

    正式开始搭建cocos2dx环境,回到熟悉的VS 1.Python安装配置 这一步很简单,下载Python2.7.3,笔者直接用软件助手直接下载安装,最后配置环境变量 如下成功 2.cocos2dx ...

  6. yzoi1109&&viojs1042最小步数的一点看法——回文数

    Description - 问题描述 有一天,雄霸传授本人风神腿法第一式:捕风捉影..............的步法(弟子一:堂主,你大喘气呀.风:你给我闭嘴.)捕风捉影的关键是换气(换不好就会大喘气 ...

  7. PHP数据库

    目录 1.创建数据库连接 2.创建数据库 3.选择数据库 4.设置当前连接使用的字符编码 5.创建表 6.插入数据 7.取得数据查询结果 8.关闭连接 1.创建数据库连接 //mysql_connec ...

  8. 使用Thinkphp框架开发移动端接口

     本文给大家分享的是使用thinkphp框架开发移动端接口的2种方法,一种是开发API,另外一种是实现移动端访问自动切换移动主题模板,从而实现伪app访问,下面我们就来详细看下如何实现吧. 方案一:给 ...

  9. 【C语言】严格区分大小写

    C语言严格区分大小写 一.相关基础知识 二.具体内容 C语言严格区分大小写: 如: int为关键字,INT则为用户标识符,即可定义int INT;   int INt;   int Int;  cha ...

  10. iOS 取得CGimage字节数据的方法

    通过我在网上搜索和总结,目前看来,我发现两种比较方便的方式. 1. CGImage -> CGDataProvider -> CFData -> xx * CGDataProvide ...