整理各种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

Licensed under CC BY-NC-SA 4.0
最后更新于 Oct 14, 2016 15:25 UTC