- 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