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. UILabel的高度自适应

    _content = [UILabel new]; _content.text = @"日落时分,沏上一杯山茶,听一曲意境空远的<禅>,心神随此天籁,沉溺于玄妙的幻境里.仿佛我就 ...

  2. Linux 删除文件夹

    inux删除目录很简单,很多人还是习惯用rmdir 1.直接rm就可以了:rm -rf 目录名字 -r 就是向下递归,不管有多少级目录,一并删除-f 就是直接强行删除,不作任何提示的意思

  3. 获取Enum的扩张方法。

    public static class EnumExtention { /// <summary> /// 获取枚举的描述信息 /// </summary> /// <t ...

  4. MySql数据库4【命令行赋权操作】

    MySQL 赋予用户权限命令的简单格式可概括为:grant 权限 on 数据库对象 to 用户 一.grant 普通数据用户,查询.插入.更新.删除 数据库中所有表数据的权利. grant selec ...

  5. Javascript跳转手机站代码

    $(document).ready(function(){ var mobileAgent = new Array("iphone", "ipod", &quo ...

  6. Why your Games are Unfinished, and What To Do About It (转)

    So, you've got a new game idea, and it's going to change what everyone knows about the genre! Great! ...

  7. Spark的RDD编程(二)公众号undefined110

    创建RDD有两种方式:①读取外部数据集,lines=sc.textFile("README.md").②对一个集合进行并行化,lines=sc.parallelize([" ...

  8. SharePoint 2013 如何使用TaxonomyWebTaggingControl 控件

    在该文章中,我将介绍如何使用TaxonomyWebTaggingControl控件, 首先我相信您已经在SharePoint Managed Metadata Service里定义Term Sets, ...

  9. bzoj1136: [POI2009]Arc

    Description 给定一个序列{ai | 1 <= ai <= 1000000000 且 1 <= i <= n 且 n <= 15000000}和一个整数 k ( ...

  10. Oracle问题解决（远程登录失败）

    远程机: 安装 Oracle 的计算机: 本地机: 访问远程机 Oracle 的计算机. 一.问题描述 远程机安装 Oracle 成功. 本地机配置 InstantClient 后, PLSql De ...