我想設置一個404頁面，以便每次用戶點擊它時都會顯示一個隨機圖形。目前我編碼的方式是，圖形只在某些時候加載（我現在說它現在大約是50/50）。只是尋找一種更好的方式來編寫代碼，以便每次都能顯示其中一個div。顯示隨機div javascript，只顯示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>

任何幫助將不勝感激，謝謝！

來源

2014-04-01 user13286

[這對我的作品（http://jsfiddle.net/GaurangTandon/Pcw9x/）。也許還有其他問題？ –

你必須跟蹤用戶已經看到了什麼。使用[jquery.cookie]（https://github.com/carhartl/jquery-cookie）。 –

我不想跟蹤用戶看到的內容，我只是希望它在每次有人點擊該頁面時顯示一個隨機div。如果他們連續6次看到同一個div，那很好，只要它是隨機的。 @Gaurang，它在那裏工作，因爲這是頁面上唯一的代碼。然而，在我的網站中實現了很多其他代碼，所以有時它不會顯示div（我假設它是在div加載之前觸發的）。 – user13286

爲什麼要傳播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>

來源

2014-04-01 15:32:51 Rich

因爲我也會添加標題和段落標籤來陪伴圖片。 – user13286

然後將其附加到document.write（）命令。 – Rich

謝謝，但每個圖像隨附的文字會有所不同。 – user13286

如果你使用下劃線，你可以實現它使用的方法_.sample（）： http://underscorejs.org/#sample

或者你可以使用的方法_.shuffle（）和總是挑頭元素： http://underscorejs.org/#shuffle

來源

2014-04-01 15:41:07

感謝伊戈爾，我實際上最終使用了一個非常類似於shuffle方法的解決方案，只是沒有使用Underscore。感謝您的建議！ – user13286

沒問題！如果你想改善你的洗牌解決方案，你可以享受這個討論：http://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array-in-javascript –

真棒，感謝以下-向上！ – user13286

結束去另一條路線。而不是顯示一個隨機的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>

SOURCE

來源

2014-04-01 15:48:15 user13286

我認爲通過這樣做，你的用戶將不得不下載所有的圖像，但你的JavaScript將只顯示一個。這是一個不必要的負載傳遞給你的用戶。一個更好的方法是創建一個包含所有圖像的數組，然後對其進行混洗，並取其第一個位置，然後將其值設置爲圖像的src屬性。 –

只有2張圖片，所以我不擔心，謝謝你！ – user13286

顯示隨機div javascript，只顯示div有時

回答

SOURCE

相關問題