一段js代码解读 

<html>
    <head>
        <script type='text/javascript'>
            var imagesArray=new Array("images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg");
            function changeImg(imageNumber){
                var newImage = imagesArray[Math.round(Math.random()*3)];
                while(document.images[imageNumber].src.indexOf(newImage)!=-1){
                    newImage = imagesArray[Math.round(Math.random()*3)];
                }
                document.images[imageNumber].src = newImage;
                return false;
            }
        </script>
    </head>
    <body>
        <img name='img1' src="images/1.jpg" width=150 height=200 onclick="return changeImg(0)">
        <img name='img2' src="images/2.jpg" width=150 height=200 onclick="return changeImg(1)">
    </body>
</html>

这是一个关于图片随机出现的js代码。代码的核心内容都在changeImg函数中。

函数有一个参数，可以通过这个参数确定变化的是哪一个图片，0表示第一个图片，1表示第二个图片。

函数中的变量命名是一个难点，函数命名也是一个难点，一般运用驼峰法，看起来清楚明了。

还有就是函数中需要用到哪些数据结构也是个值得思考的问题，这里的图片变换，要用一个数组保存所有的图片途径。

通过Math对象的round方法和random方法，可以获取随机数，0到3的随机数。这是个处理技巧，先用random*3获得0到3的随机数（不包括3），然后用round处理一下，可以获得整数0,1,2,3。

还有就是要避免与之前的图片重复，就用另一个小技巧，String对象的indexOf方法，判断，随机出来的图片是否是上一次的图片，循环直到不是上一次的图片为止，也就是indexOf的返回结果为-1。

这时候将图片的路径保存为新随机出的路径即可达到随机产生图片的效果。

很多小技巧，要多多实践，多多体会，多多积累。

posted @ 2012-07-11 16:35  TBHacker  阅读(652)  评论(0)    收藏  举报