javascript随机将第一个dom中的图片添加到第二个div中去，此代码的是一个简单的例子，将第一个div中的五张图片中，提取随机两张显示到第二个div中。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>随机显示五张图片里面的二张图片-测试图片用的百度空间图片</title>
  6. <script type="text/javascript">
  7.     window.onload = function (){
  8. 		var count=4;
  9. 		var original=new Array;//原始数组
  10. 		var tpDiv = document.getElementById('kstupian'); //获得dom对象
  11. 		var images = tpDiv.getElementsByTagName("img");
  12. 		for (var i=0;i<count;i++){original[i]=i;}
  13. original.sort(function(){ return 0.5 - Math.random(); });
  14.         var myDiv = document.getElementById('myDiv'); //获得dom对象
  15. 		for (var i=0;i<2;i++){
  16. 		var bigImg = document.createElement("img");     //创建一个img元素
  17. 		bigImg.width="200";  //200个像素 不用加px
  18.       	bigImg.src=images.item(original[i]).src;   //给img元素的src属性赋值
  19. 	  	myDiv.appendChild(bigImg);      //为dom添加子元素img
  20. } 
  21.  
  22.     };
  23. </script>
  24. </head>
  25.  
  26. <body>
  27. <h2>第一个div图片为五张</h2>
  28. <div id="kstupian">
  29. <img src="http://a.hiphotos.bdimg.com/album/s%3D1000%3Bq%3D90/sign=2a369e6d918fa0ec7bc7600d16a7629f/b03533fa828ba61ee03594714134970a314e5990.jpg" width="200">
  30. <img src="http://c.hiphotos.bdimg.com/album/s%3D1000%3Bq%3D90/sign=b03c3e4211dfa9ecf92e521752e0cc72/d058ccbf6c81800a5b37d550b13533fa838b4799.jpg"  width="200">
  31. <img src="http://h.hiphotos.bdimg.com/album/s%3D1000%3Bq%3D90/sign=a4ff82aab74543a9f11bfecc2e27b1f3/203fb80e7bec54e721374640b9389b504ec26a90.jpg"  width="200">
  32. <img src="http://g.hiphotos.bdimg.com/album/s%3D1000%3Bq%3D90/sign=cb1f8fa37b899e517c8e3e147297e242/b3119313b07eca809bdd65b9912397dda0448390.jpg"  width="200">
  33. <img src="http://a.hiphotos.bdimg.com/album/s%3D1000%3Bq%3D90/sign=fe1172bbad6eddc422e7b0fb09eb8d8c/5ab5c9ea15ce36d325dcdf6e3af33a87e850b190.jpg"  width="200">
  34. </div>
  35. <h2>第一个div图片为随机不重复的二张</h2>
  36. <div id="myDiv" ></div>
  37. </body>
  38. </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. Linux命令：head命令详解

    概述:head命令用于显示文件文字区块 1.格式 head [参数][文件] 2.参数 -q 隐藏文件名 -v 显示文件名 -c<字节> 显示字节数 -n<行数> 显示的行数 ...

  2. java_设计模式_工厂模式_Factory Pattern（2016-08-04）

    工厂模式主要是为创建对象提供了接口.工厂模式按照<Java与模式>中的提法分为三类: (1)简单工厂(Simple Factory)模式,又称静态工厂方法模式(Static Factory ...

  3. SGU 230. Weighings (拓扑排序)

    题意: 给出质量为1~n的n个箱子的m对轻重关系,输出一种可能的箱子的质量排列. Solution: 拓扑排序,注意要处理重边. #include <iostream> #include ...

  4. 【BZOJ3295】【块状链表+树状数组】动态逆序对

    Description 对于序列A,它的逆序对数定义为满足i<j,且Ai>Aj的数对(i,j)的个数.给1到n的一个排列,按照某种顺序依次删除m个元素,你的任务是在每次删除一个元素之前统计 ...

  5. 控制寄存器 CR*

    控制寄存器(CR0-CR3)用于控制和确定处理器的操作模式以及当前执行任务的特性,如图4-3所示.CR0中含有控制处理器操作模式和状态的系统控制标志:CR1保留不用:CR2含有导致页错误的线性地址:C ...

  6. Crystal Report制作使用

    Crystal Report制作使用 本文主要划分为以下六部分: 一.Crystal Report for .NET 的功能 二.Crystal Report总体结构 三.报表数据访问执行模式 四.报 ...

  7. PHP下编码转换函数mb_convert_encoding与iconv的使用说明

    mb_convert_encoding这个函数是用来转换编码的. 不过英文一般不会存在编码问题,只有中文数据才会有这个问题.比如你用Zend Studio或Editplus写程序时,用的是gbk编码, ...

  8. Problem:To Connect with MySQL in Virtual PC Environment

    I'm trying to build a 1:n dev environment,with the help of Vsever(just like VMware worked on sever) ...

  9. SPSS问题

    1.SPSS中变量视图里的度量标准的三个选项是什么意思 Nominal名义变量是对数据进行分类得到的变量,如按性别分为男女,按年龄分为老.中.青: Ordinal顺序变量是对数据进行排序得到的变量,如 ...

  10. KV总结

    今天没事又重新写了一遍.很多注释是自己犯糊涂后来又终于跨过去的备忘. // ImgEff.js function ImgEff(div,time){ //构造函数,需要传入参数div的id和时间 // ...