Question

如何创建一个生成器，当按下按钮时，它会选择我已添加到列表中的随机单词。

例如，“Apple”，“Banana”和“Pear”在我的列表中，我希望最终用户按下按钮，代码将获取其中一个水果但完全随机，我该怎么做？

此致约翰

Answer 1

首先，你提到一个列表;这直接转换为数组。其次，你有一个有限数量的选项，在数组中显示，你想随机选择一个。这转换为随机选择索引（整数）。由于数组从0开始并且您无法选择通过最后一个索引的项目，因此您需要在0和数组长度之间选择随机范围。

如果您只是想通过按下按钮从列表中获取随机项，您肯定希望将其与前端隔离，即javascript：

var randomWords = [
    'Apple',
    'Banana',
    'Pear'
];

function getRandomWordFromList(list) {
    var index = getRandomInt(0,list.length);
    return randomWords[index];
}

function getRandomInt(min,max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

document.getElementById('myButton').onclick = function() { // for example's sake...
    document.getElementById('theOutput').innerHTML = getRandomWordFromList(randomWords);
};

（来自Generating random whole numbers in JavaScript in a specific range?的getRandomInt）

另外，如果您的数组是碎片化的（即缺少某些索引），您可以使用（更安全，虽然更复杂）：

function arrayKeys(array) {
    var i,keys = [];
    for ( i in array ) {
        if ( isInt(i) && array.hasOwnProperty(i) ) {
            keys.push(i);
        }
    }
    return keys;
}

function isInt(value) { 
    return !isNaN(parseInt(value,10)) && (parseFloat(value,10) == parseInt(value,10)); 
}

function getRandomInt(min,max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function getRandomWordFromList(list) {
    var keys = arrayKeys(list); // be sure to only get indices that exist
    var key = getRandomInt(0,keys.length-1);
    return list[keys[key]];
}

var randomWords = [
    'Apple',
    'Banana',
    'Pear'
];

delete randomWords[1]; // remove 'Banana'

var theWord = getRandomWordFromList(randomWords);

如果服务器端存在影响随机列表的内容，可以通过PHP填充randomWords数组，如下所示：

<?php
$randomWords = array(
    'Apple',
    'Banana',
    'Pear'
);
?>
<script type="text/javascript">
var randomWords = [<?php echo "'".implode("','",$randomWords)."'"; ?>];
// don't forget your getRandomWord functions
</script>

奖励：如果随机化必须完全发生在服务器端，即php，这里是翻译：

<?php
$randomWords = array(
    'Apple',
    'Banana',
    'Pear'
);

echo $randomWords[array_rand($randomWords)]; // output somewhere
?>

Answer 2

一个简单的javascript闭包来演示。

var generateRandom = (function () {
    var fruit;
    return function () {
        if (fruit === undefined) {
            fruit = ["Apple", "Banana", "Pear"];
        }
        return fruit[Math.floor(Math.random() * fruit.length)];
    }
}());

这里Math.random给出一个0到1之间的数字。所以我将它与数组长度相乘得到一个介于0和fruit.length之间的数字。这将是我们要选择的项目的索引。

Answer 3

使用Javascript：

var fruit;
var rand = Math.random();
if (rand <= 0.33) {
  fruit = 'Apple';
} else if (rand > 0.34 && rand <= 0.66) {
  fruit = 'Banana';
} else if (rand > 0.67) {
  fruit = 'Pear';
}

Math.random()将返回0到1之间的数字。

Answer 4

这里只是一个如何做到这一点的简单示例。动作（在这种情况下单击）由JavaScript处理，所以我强烈建议在那里处理所有这些。这个想法是，当你可以将它打包在一个JavaScript对象中时，你不需要单独的html或特别是php担心这个问题。这段代码远非完美，但我认为这是一个很好的起点。请注意，执行此操作所需要做的就是包含此脚本，只需键入（在js中）wordRandomizer.run(myElem);当myElem是对dom中元素的引用时（我刚刚使用了在这个例子中的身体）。

Demo here.

var wordRandomizer = { //the name of your "app"
  run : function(targetElem) { //this is the function you will call to make it all happen
    var markup = this.createMarkup();
    targetElem.appendChild(markup);
  },
  createMarkup : function() {
    var that = this;
    var frag = document.createDocumentFragment();

    this.elem = document.createElement('span');

    var button = document.createElement('button');
    button.innerText = 'Change Item';
    button.addEventListener('click', function() {
      that.changeItem();
    });

    frag.appendChild(this.elem);
    frag.appendChild(button);

    return frag;
  },
  changeItem : function() {
    var rand = this.getRandInt(1, this.items.length) - 1; // -1 because arrays start at 0
    this.elem.innerText = this.items[rand];
  },
  getRandInt : function(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  },
  items : [
    'itemA',
    'itemB',
    'itemC',
    'itemD'
  ]
};

wordRandomizer.run(document.body); 
//here, you just pass in the element where your "app" will attach its output. 
//If you want to get fancier, you could make more things optional, add more functionality, etc and pass in those options here.

哦，你应该添加一些逻辑，以确保所选项目与以前不一样。有几种方法可以轻松完成，但我会给你留下乐趣：）

简单随机生成器

4 个答案: