Javascript數組和信息檢索

好吧，我甚至不知道如何標題這篇文章，但我有一點邏輯問題，我需要幫助。所以在網站的首頁我需要4盒。這四個框包含1個圖像，1個標題和一個日期。訣竅是，這四個框需要從10列表中隨機生成。因此，在JavaScript中，可以創建類似xml結構的東西，從中隨機選取4個隨機數......所以我希望它的工作方式是...Javascript數組和信息檢索

項目1
- 日期
- 標題
- SRC
項目2
- 日期
- 標題
- SRC
項目3
- 日期
- 標題
- SRC

是否有可能把項目中的數組然後按照隨機選擇他們後的屬性？我可以用PHP/MySQL做到這一點，但這對於此非常不必要。有任何想法嗎？謝謝！

來源

2011-08-12 Greg Thompson

如何存儲在使用JSON對象的項目？ –

如何做到這一點的任何例子？ –

簡短的回答，是的。下面的答案很長。

var obj1 = { 
    date: "04/12/1989", 
    title: "My birthday", 
    src: "path_to_some_image.png" 
} 
var obj2 = { 
    date: "12/25/2011", 
    title: "Christmas", 
    src: "santa_claus.gif" 
} 

objs = [obj1, obj2]; 
rand = Math.floor(Math.random() * objs.length); 

console.log(objs[rand].title + " is " + objs[rand].date); 
// "My birthday is 04/12/1989" 
// or "Christmas is 12/25/2011"

來源

2011-08-12 18:49:33

@katspaugh：謝謝:) –

當然，您可以使用Math.random來實現此目的。把你的列表放在一個數組中，然後選擇一個0到9之間的隨機數並選擇該項。你會做這四次，你很好去... 除非你不希望兩次（或更頻繁）相同的項目 - 我很確定是你想要的。我的意思是沒有重複。如果你不想要biased概率分佈，這會讓事情更有趣。在這種情況下，該算法是這樣的：

I =隨機數9之間0和 - >接陣列[I]
如果（I == 9） - >所有公，跳過3
如果（ⅰ< 9） - >交換陣列[i]和在0和8之間陣列[9]
J =隨機數 - >接陣列[j]的
如果（j == 8） - >如果（j < 8）→交換數組[j]和數組[8]
K =隨機數 - >接陣列[K] ...

你獲得的pattern.The方法也被稱爲Fisher-Yates Shuffle。

來源

2011-08-12 18:59:15 emboss

+1;比其他更多的細節和更少的代碼。 –

不立即顯而易見！ – katspaugh

您應該使用一組對象..

var items = [{ 
    'date': 'date of item 1', 
    'title': 'title of item 1', 
    'src': 'url/of/image-1'}, 
{ 
    'date': 'date of item 2', 
    'title': 'title of item 2', 
    'src': 'url/of/image-2'}, 
/* .. more items.. */ 
{ 
    'date': 'date of item 9', 
    'title': 'title of item 9', 
    'src': 'url/of/image-9'}, 
{ 
    'date': 'date of item 10', 
    'title': 'title of item 10', 
    'src': 'url/of/image-10'}]; 

for (var i = 1; i < 5; i++) { 
    var item = items.splice(Math.floor(Math.random() * (items.length)), 1)[0]; 

    var el = document.getElementById('item-' + i); 
    // insert the info you want in the DOM .. i just add it as text.. 
    el.innerHTML= item.date + ' - ' + item.title + ' - ' + item.src; 
}

，並使用預先定義的HTML

<div id="item-1"></div> 
<div id="item-2"></div> 
<div id="item-3"></div> 
<div id="item-4"></div>

演示在http://jsfiddle.net/qkMNb/1/

來源

2011-08-12 19:09:04

Javascript數組和信息檢索

回答

相關問題