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. poj1828

    poj1828 [问题的描述]是这样的:程序猿的近亲 猴子(......)最近在进行王位争夺站. 题中使用二维坐标轴上的点(x,y)来代表猴子所占有的位置, 每只猴子占有一个坐标点.并且一个坐标点上面 ...

  2. OC - 19.GCD

    简介 GCD(Grand Center Dispatch)是Apple为多核的并行运算提出的解决方案,纯C语言 更加适配多核处理器,且自动管理线程的生命周期,使用起来较为方便 GCD通过任务和队列实现 ...

  3. 解决每次升级Xcode后三方插件失效问题

    其实就是插件里面的UIID没有加新XcodedeUIID 拿常用的Alactraz来说 在Terminal中 un these 2 lines in terminal:1:find ~/Library ...

  4. java 从jar包中读取资源文件

    在代码中读取一些资源文件(比如图片,音乐,文本等等),在集成环境(Eclipse)中运行的时候没有问题.但当打包成一个可执行的jar包(将资源文件一并打包)以后,这些资源文件找不到,如下代码: Jav ...

  5. 用JS实现版面拖拽效果

    类似于这样的一个版面,点击标题栏,实现拖拽效果. 添加onmousedown事件 通过获取鼠标的坐标(clientX,clientY)来改变面板的位置 注意:面板使用绝对定位方式,是以左上角为参考点, ...

  6. Linux内存点滴：用户进程内存空间

    原文出处:PerfGeeks 经常使用top命令了解进程信息,其中包括内存方面的信息.命令top帮助文档是这么解释各个字段的.VIRT , Virtual Image (kb)RES, Residen ...

  7. jQuery选择器种类整理

    选择器概念 jQuery选择器是通过标签.属性或者内容对HTML内容进行选择,选择器运行对HTML元素组或者单个元素进行操作. jQuery选择器使用$符号,等同于jquery,例如: $(“li”) ...

  8. EasyUI 1.3之前DataGrid中动态选中、获取Checkbox

    这几天做项目,由于项目中用到的EasyUI版本过低,不能使用自带操作DataGrid中CheckBox的方法. 所以自己写了一个临时方案: 根据ID集合选中所属行的CheckBox: data={1, ...

  9. 【转载】详细解读C#中的 .NET 弱事件模式

    你可能知道,事件处理是内存泄漏的一个常见来源,它由不再使用的对象存留产生,你也许认为它们应该已经被回收了,但不是,并有充分的理由. 在这个短文中(期望如此),我会在 .Net 框架的上下文事件处理中展 ...

  10. Ajax实现的长轮询不阻塞同一时间内页面的其他Ajax请求（同域请求）

    最近要做一个来电的弹屏功能,利用OM 系统的接口,OM系统发送请求到接口程序,分析数据添加到mysql数据库中,然后把最新的数据id 跟今日来电的总的数量存储到memcache 中.弹屏程序根据读取的 ...