Question

好的，所以我甚至不确定如何标题这篇文章，但我有一点逻辑问题，我需要帮助。所以在网站的头版我需要4个盒子。这四个框包含1个图像，1个标题，一个日期。诀窍是，这四个框需要从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用于此目的。将列表放入数组中，然后选择0到9之间的随机数并选择该项。你这样做了四次，你很高兴... 除非你不想要同一项目两次（或更频繁） - 我很确定你想要的。我的意思是没有重复。如果你不想要biased概率分布，这会让事情变得更有趣。在这种情况下，算法如下：

i = 0到9之间的随机数 - ＆gt; pick array [i]
if（i == 9） - ＆gt;一切顺利，跳过3
if（i＆lt; 9） - ＆gt; swap array [i]和array [9]
j = 0到8之间的随机数 - ＆gt; pick array [j]
if（j == 8） - ＆gt;好吧，跳过6
if（j <8） - ＆gt; swap array [j]和array [8]
k = 0到7之间的随机数 - ＆gt;选数组[k] ...

你得到了这种模式。这种方法也被称为Fisher-Yates Shuffle。

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/

演示

Javascript数组和信息检索

3 个答案: