一個簡單的隨機生成器

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之間的數之間的數字。這將是我們要選擇的項目的索引。