SOURCE

Question

我正在尝试设置一个404页面，以便每次用户点击它时都会显示一个随机图形。目前我编码的方式，图形只在某些时候加载（我现在说它大约是50/50）。只是寻找一种更好的编码方式，以便每次都能显示其中一个div。

这是我的HTML：

<div id="errorpages">
    <div class="error">
        <img src="404.gif">
    </div>

    <div class="error">
        <img src="4042.gif">
    </div>
</div>

JavaScript：

<script type="text/javascript">
this.random404 = function(){
    var length = $("#errorpages div").length;
    var ran = Math.floor(Math.random()*length) + 1;
    $("#errorpages div:nth-child(" + ran + ")").show();
};
$(document).ready(function(){
    $('.error').hide();
    random404();
});
</script>

非常感谢任何帮助，谢谢！

Answer 1

为什么要传播div？它增加了许多额外的代码。只需将图像设置为一个数组，然后从那里开始使用Math.rand。 Jquery没有必要。

<script type="text/javascript">
var images = [], index = 0;
images[0] = "Caption 0 <img src='1.gif'>";
images[1] = "Caption 1 <img src='2.gif'>";
images[2] = "Caption 2 <img src='3.gif'>";
images[3] = "Caption 3 <img src='4.gif'>";
images[4] = "Caption 4 <img src='5.gif'>";
images[5] = "Caption 5 <img src='6.gif'>";
images[6] = "Caption 6 <img src='7.gif'>";
images[7] = "Caption 7 <img src='8.gif'>";
index = Math.floor(Math.random() * images.length);
document.write("<p>Head</p>" + images[index] + "<p>Foot</p>");
</script>

Answer 2

如果你使用下划线，你可以使用_.sample（）方法实现它： http://underscorejs.org/#sample

或者您可以使用方法_.shuffle（）并始终选择第一个元素： http://underscorejs.org/#shuffle

Answer 3

结束了另一条路线。我没有显示随机div，而是随机排序div，然后只显示第一个div。

<script type="text/javascript">
var divs = $("div.error").get().sort(function(){ 
            return Math.round(Math.random())-0.5;
           }).slice(0,1);
$(document).ready(function(){
    $(divs).show();
});
</script>

显示随机div javascript，有时只显示div

3 个答案:

SOURCE