整理各种JavaScript实现随机替换图片的方法

1将以下代码加入HTML的之间：

<script>
document.write(<img src="img/+parseInt(Math.random()*(5))
+.gif"height="40" width="50">
</script>

其中的图片文件名为： 0.gif 1.gif 2.gif 3.gif 4.gif

2.将以下代码加入HTML的之间：

<script LANGUAGE="JavaScript">
bg = new Array(2);
//设定图片数量，如果图片数为3，这个参数就设为2，依次类推
bg[0] = 'bg1.gif' //显示的图片路径，可用http://
bg[1] = 'bg2.gif'
bg[2] = 'bg3.gif'
index = Math.floor(Math.random() * bg.length);
document.write("<BODY BACKGROUND="+bg[index]+">");
</script>

3 在script中将这些图像编为一个数组，便于调用。数组的长度当然就是图像的数量。

var bodyBgs = [];    //创建一个数组变量来存储背景图片的路径
bodyBgs[0] = "images/01.jpg";
bodyBgs[1] = "images/02.jpg";
bodyBgs[2] = "images/03.jpg";
bodyBgs[3] = "images/04.jpg";
bodyBgs[4] = "images/05.jpg";

因为上面用到了5个图像，所以在这里需要产生一个0到4的随机数。如果数组长度不一样，修改下面代码中的乘数就可以。

var randomBgIndex = Math.round( Math.random() * 4 );

核心的程序就是这些。尽管很简单，却是一种小小的思路，若以此为基础，通过加工可以做出一些扩展功能。比如：主题切换以及其它的随机呈现等等。下面是完整的JS代码。

<script type="text/javascript">
    //<!CDATA[
        var bodyBgs = [];
        bodyBgs[0] = "images/01.jpg";
        bodyBgs[1] = "images/02.jpg";
        bodyBgs[2] = "images/03.jpg";
        bodyBgs[3] = "images/04.jpg";
        bodyBgs[4] = "images/05.jpg";
        var randomBgIndex = Math.round( Math.random() * 4 );
    //输出随机的背景图
        document.write('<style>body{background:url(' + bodyBgs[randomBgIndex] + ') no-repeat 50% 0}</style>');
    //]]>
</script>

4.jQuery实现页面背景随机切换

<!DOCTYPE html>  
<html>  
<head>  
<meta charset=utf-8" />  
<title>jQuery实现页面背景随机切换</title>  
<style>  
.back {  
    position: absolute;  
    width: 1000px;  
    height: 100px;  
    background-size: cover;  
}  
</style>   
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>  
<script>  
$(document).ready(function(){  
    var imgArr=["bg001.jpg",   
                "bg002.png",   
                "bg003.png"  
    ];  
    var img =parseInt(Math.random()*(imgArr.length));   
    var currentImage=imgArr[img];  
    $(".back").css("background-image","url("+currentImage+")");  
});  
</script>  
  
</head>  
<body>  
    <div class="back" >   
        123  
    </div>  
</body>  
</html>

5.JavaScript点击按钮随机切换网页背景色

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
 <title>通过按钮变换背景颜色</title>
 </head>
 <body>
 <script language="javascript">
 var Arraycolor=new Array("olive","teal","red","blue","maroon","navy","lime","fuschia","green","purple","gray","yellow","aqua","white","silver");
 var n=0;
 function turncolors(){
 	if (n==(Arraycolor.length-1)) n=0;
 	n++;
 	document.bgColor = Arraycolor[n];
 }
 </script>
 <form name="form1" method="post" action="">
   <p>
     <input type="button" name="Submit" value="变换背景" onclick="turncolors()">
 </p>
   <p>用按钮随意变换背景颜色.</p>
 </form>
 </body>
 </html>

-6

<script language="javascript"> now = new Date(); erke = now.getSeconds(); erke = erke - parseInt(erke/9)*9 + 1;//定义张数 </script>

<!--这里开始做成动态的DIV头--> <script language="javascript"> document.write("<div style='background:url(images/bg"+erke+".jpg)//同目录images下图片 no-repeat 90px 0px;' id=Change></div>") </script>

Via:jb51\CSDN