一段js代码解读

最新推荐文章于 2024-03-26 15:52:29 发布

weixin_34232744

最新推荐文章于 2024-03-26 15:52:29 发布

阅读量252

点赞数

文章标签：数据结构与算法

原文链接：https://yq.aliyun.com/articles/340936

版权

复制代码

<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 οnclick="return changeImg(0)">
        <img name='img2' src="images/2.jpg" width=150 height=200 οnclick="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。

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

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

本文转自TBHacker博客园博客，原文链接：http://www.cnblogs.com/jiqing9006/archive/2012/07/11/2586531.html，如需转载请自行联系原作者

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。