javascript随机将第一个dom中的图片添加到第二个div中示例

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>

赞 (0)

相关推荐

  • javascript随机显示背景图片的方法

    本文实例讲述了javascript随机显示背景图片的方法.分享给大家供大家参考.具体如下: 将以下代码加入HTML的<head></head>之间: <script LANGUAGE="JavaScript"> bg = new Array(2); //设定图片数量,如果图片数为3,这个参数就设为2,依次类推 bg[0] = 'bg1.gif' //显示的图片路径,可用http:// bg[1] = 'bg2.gif' bg[2] = 'bg3.gi

  • 基于JavaScript代码实现随机漂浮图片广告

    在网上有很多这样的代码,不过未必符合W3C标准,因为在头部加上<!DOCTYPE html>类似标签之后,漂浮效果就会失效,下面分享一个符合标准的漂浮代码,使需要的朋友免去大量改造代码的繁琐. 代码一: 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http:/

  • JSP随机验证图片如何制作

    小编整理了一篇关于模仿腾讯随机验证图片的文章.下面直接上代码吧!一个Java 类和一个JSP 页面. Java类代码: 以下是JSP模仿腾讯随机验证图片引用片段: package icewee.image; import java.awt.BasicStroke; import java.awt.Color; import java.awt.Font; import java.awt.Graphics2D; import java.awt.RenderingHints; import java.

  • JavaScript 创建随机数和随机图片

    创建随机数 ①自JavaScript产生后,好多浏览器中都有内置的随机数发生方法.例如: var number = Math.random(); 该方法产生一个0到1之间的浮点数. ②基于时间,亦可以产生随机数.例如: var now=new Date(); var number = now.getSeconds(); 这将产生一个基于目前时间的0到59的整数. var now=new Date(); var number = now.getSeconds()%43; 这将产生一个基于目前时间的

  • js 图片随机不定向浮动的实现代码

    复制代码 代码如下: //很有趣的浮动哦,不用太多代码,和大家分享下<html><head>随机浮动<style type="text/css">#divimg{/*对图片进行绝对定位*/position:absolute;}</style></head><body><div id="divimg"><img src="../../resource/images/fl

  • js实现网页随机切换背景图片的方法

    本文实例讲述了js实现网页随机切换背景图片的方法.分享给大家供大家参考.具体实现方法如下: 首先要准备一些图像,图像的大小(无论是尺寸大小还是数据大小)要控制好,如果太大,会使用户等不及查看全图就跳出了,如果太小,又会影响页面质量 在script中将这些图像编为一个数组,便于调用.数组的长度当然就是图像的数量. 复制代码 代码如下: var bodyBgs = [];    //创建一个数组变量来存储背景图片的路径 bodyBgs[0] = "images/01.jpg"; bodyB

  • JavaScript实现随机替换图片的方法

    本文实例讲述了JavaScript实现随机替换图片的方法.分享给大家供大家参考.具体如下: 下面代码可实现将页面上的图片随机替换成别的图片,或者随机显示一个图片 <script> document.write(<img src="img/+parseInt(Math.random()*(5)) +.gif"height="40" width="50"> </script> 其中的图片文件名为: 0.gif 1.

  • 图片上传即时显示缩略图的js代码

    <script language="javascript" type="text/javascript"> var allowExt = ['jpg', 'gif', 'bmp', 'png', 'jpeg']; var preivew = function(file, container){ try{ var pic = new Picture(file, container); }catch(e){ alert(e); } } //缩略图类定义 va

  • JS实现鼠标移动到缩略图显示大图的图片放大效果

    JS实现鼠标移动到缩略图显示大图的图片放大效果

    一个网页上用的图片提示效果,当把鼠标移动到图片缩略图的时候,会显示图片大图,似乎在网上这是个很常见的效果,实现方法也比较多,有人用CSS,有人用JavaScript,有人用jQuery,总之,选择自己习惯的方式去实现,就是最棒的. 图片提示效果 body{margin:0 ;padding:40px;line-height:180%;} img{border:none;} ul,li{margin:0 ;padding:0;} li{list-style:none;display:inline;

  • JS实现页面载入时随机显示图片效果

    本文实例讲述了JS实现页面载入时随机显示图片效果.分享给大家供大家参考,具体如下: <html> <head> <title>JS 随机图片效果</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style type="text/css"> <!-- img { b

  • js鼠标点击图片实现随机变换图片的方法

    本文实例讲述了js鼠标点击图片实现随机变换图片的方法.分享给大家供大家参考.具体实现方法如下: <html> <title>鼠标点击图片即可随机变换图片</title> <body bgcolor="#fef4d9" OnLoad="swapPic()"> <center> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin var ra

  • javascript 随机广告代码(图片广告)

    '); document.writeln(''); document.writeln(''); //DEL 20090522 document.write(''); //****************************************************/ //rnd() //****************************************************/ function rnd() { var ia=9301; var ic=49297; var

随机推荐