Javascript数组和信息检索

Question

好的，我甚至不知道如何命名这篇文章，但我有一个逻辑上的小问题，我需要帮助。因此，在一个网站的头版，我需要4个框。这四个框包含一个图像，一个标题，一个日期。诀窍是，这四个框需要从10的列表中随机生成。因此，在javascript中，是否可以创建类似于xml结构的东西，从中随机选择4个.所以我希望它的工作方式是..。

• 第1项
  • 日期
  • 标题
  • src

​

• 第2项
  • 日期
  • 标题
  • src

​

• 第3项
  • 日期
  • 标题
  • src

​

是否可以将项目放在数组中，然后在随机选择它们之后访问它们的属性？我可以使用PHP/MySQL来完成这个任务，但这对此非常不必要。有什么想法吗？谢谢!

Answer 1

简短的回答是的。下面是长篇大论。

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"

Answer 2

当然，您可以为此目的使用Math.random。将您的列表放在Array中，然后选择0到9之间的随机数并选择该项。你做了四次然后你就可以走了..。，除非是，否则您不会两次(或者更频繁地)需要相同的项目--我很确定这就是您想要的。不重复了，我是说。这使得事情更有趣，如果你不想要一个偏颇概率分布。在这种情况下，算法如下：

1. I=0到9 -> pick arrayi之间的随机数
2. 如果(i == 9) ->一切正常，跳过3
3. if (i<9) ->交换arrayi和array9
4. J=0到8 -> pick arrayj之间的随机数
5. 如果(j == 8) ->很好，跳过6
6. 如果(j < 8) ->交换数组和array8
7. K=0~7 ->的随机数。

您可以得到pattern.The方法，也称为费舍-耶茨洗牌。

Answer 3

您应该使用一个对象数组。

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/演示