要显示的图像的随机部分答案

【问题标题】：Random section of image to display要显示的图像的随机部分
【发布时间】：2014-09-27 05:18:19
【问题描述】：

我有一个大约 2500 像素宽和 300 像素高的大图像。我保存了这张图片的 4 个版本：
左侧
右侧
左翻转
右翻转

图像保存如下。 img/横幅1.png img/横幅2.png img/横幅3.png img/Banner4.png

                    var Num;
            function gen(){
                    var x;
                    x = Math.floor(Math.random()*4+1);
                    Num = x;

                    while(Num == x){
                            Num = Math.floor(Math.random() * 3 + 1);
                    }
                    document.write("<style type='text/css'>");
                    document.write(".banner{");
                    document.write("background-image: url('img/Banner" + Num + ".png');");
                    document.write("background-position:left top, left bottom;");
                    document.write("background-repeat:repeat-x;");
                    document.write("-webkit-border-top-left-radius: 50px;");
                    document.write("-webkit-border-top-right-radius: 50px;");
                    document.write("-webkit-box-shadow: 0px 0px 5px 5px rgba(10, 10, 10, 0.5);");
                    document.write("-moz-box-shadow: 0px 0px 5px 5px rgba(10, 10, 10, 0.5);");
                    document.write("box-shadow: 0px 0px 5px 5px rgba(10, 10, 10, 0.5);");
                    document.write("border-bottom: 3px solid #505050;");
                    document.write("</style>");
            }
            gen();

到目前为止，您可能已经注意到没有问题，但这似乎有点效率低下。我想知道是否有人对性能方面的改进提出建议。

【问题讨论】：

创建x并将其与Num进行比较的目的是什么？为什么不只是function gen(){ Num = Math.floor(Math.random() * 3 + 1);}？
感谢您的帮助。不幸的是，我还不能投票，但我一直在寻求提高代码性能，非常感谢任何建议。

标签： image math random

【解决方案1】：

您的代码没有使用Banner4.png。那是因为 Math.random() 确实排除了值 1，所以 Math.random() 在 [0,1) 中，三倍于 [0,3)，加一得到 [1,4) 并发言你得到{1,2,3}。所以用* 4代替* 3。

正如 Kevin 在评论中已经提到的那样，您对 x 的使用似乎没有动机并且性能不佳。您似乎没有使用它的值，所以您不妨避免循环并编写

Num = Math.floor(Math.random() * 4 + 1);

作为函数的第一行。您也可以将所有这些 document.write 调用组合成一个调用，以获得轻微的性能提升，但我猜效果应该可以忽略不计。省略循环的影响也可以忽略不计，但它也会使代码不那么混乱，这就是我建议在任何情况下进行修改的原因。否则，如果会降低可维护性，请不要尝试优化性能，除非您确定自己有理由需要优化。

【讨论】：