一个简单的随机生成器

Question

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

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

问候， 约翰

Answer 1

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

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. 

哦，你应该添加一些逻辑，以确保选择之前将不会是同一项目的项目。有几种方法可以很容易地做到，但我会把乐趣留给你:)

Answer 2

使用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 3

首先，你提到一个列表;这直接转化为阵列。 其次，你有数量有限的选项，在数组中呈现，并且你想随机挑选一个。这意味着随机挑选索引（整数）。由于数组从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); 
}; 

（getRandomInt从Generating random whole numbers in JavaScript in a specific range? ）

另外，如果你的阵列被分段（即某些指标缺失），你可以使用（更安全，虽然比较绕口）：

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 4

一个简单的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之间的数之间的数字。这将是我们要选择的项目的索引。