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. Android TV 模拟器启动

    模拟器启动错误 使用IntelCPU的模拟器 http://software.intel.com/en-us/android/articles/intel-hardware-accelerated-e ...

  2. 几种不同存储形式下的数据挖掘问题[ZZ]

    从原理上说,数据挖掘应该可以应用到任何信息存储方式的知识挖掘中,但是挖掘的挑战性和技术会因为源数据的存储类型的不同而不同.特别是,近年来的研究表明数据挖掘所涉及的数据存储类型越来越丰富,除了一些有通用 ...

  3. 虚拟机VHD格式解析到NTFS文件系统解析

    本来的需求是XEN下的镜像取证,但这篇仅包括他支持的一种格式,就是VHD,此项目从头开始大概用了两周时间,中间遇到了很多让人头大的问题,光是思考的笔记就写了十几页纸,不过实际上并没有那么难,主要是很久 ...

  4. js 之 复制一段代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. PHP对象类型在内存中的分配

    对象类型和整型.字符串等类型一样,也是PHP中的一种数据类型.都是在程序中用于存储不同类型数据使用的,在程序运行时它的每部分内容都要先加载到内存中再被使用.那么对象类型的数据在内存中是如何分配的呢?先 ...

  6. 商务通代码API

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content ...

  7. windows live writer 下载及安装

    windowslive writer下载地址: http://www.microsoft.com/en-us/download/details.aspx?id=8621(不知为啥,这里我无法下载)或 ...

  8. api1

    http://www.android-doc.com/reference/android/app/Fragment.html

  9. NSSet与NSArray区别

    NSSet与NSArray区别     NSSet到底什么类型,其实它和NSArray功能性质一样,用于存储对象,属于集合: NSSet  , NSMutableSet类声明编程接口对象,无序的集合, ...

  10. DDD的ABP开发框架

    基于DDD的ABP开发框架初探   一.基本概念 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称. ABP是土耳其的以为架构师hikalkan开发 ...