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数组和信息检索

回答

相关问题