javascript - 从列表中选择随机段落

Question

我目前正在学习 Javascript，我想创建自己的 Lorem Ipsum 生成器。

基本上，我会有一个段落列表（在 javascript 中，还是在 HTML 文档中？）。

当用户按下Generate按钮时，它将从列表中输出 3 个随机段落。

我在这里环顾四周，但找不到任何有用的东西。

谢谢

Answer 1

您可以简单地拥有一个 Javascript 数组并选择一个随机索引并将该段落注入 DOM 元素。我还更新了代码，根据您在下面的评论不重复之前的随机整数。

示例（未经测试的代码）

//global to store previous random int
_oldInt = null;

var paragraphArray = ["Lorem ipsum delor...", "The great white...", "Chitty-chitty-bang-bang..."];  

//update element content (e.g. `<div>` with paragraph)
document.getElementById("MyID").innerHTML = pickRandom(paragraphArray);

var pickRandom = function(paragraphArray){
    //random index of paragraphArray
    var randomInt = Math.floor(Math.random()*paragraphArray.length);
    //ensure random integer isn't the same as last
    if(randomInt == _oldInt)
        pickRandom(paragraphArray);
    else{
        _oldInt = randomInt;
        return paragraphArray[randomInt];
    }
}

Answer 2

您可以使用Math.random从列表中生成随机索引：

var paragraphs = [...]; # This is your list of paragraphs

function get_random_paragraph() {
    var index = Math.floor(paragraphs.length * Math.random());
    return paragraphs[index];
};

该表达式Math.floor(MAX_VALUE * Math.random())生成一个随机整数x，其中0 <= x < MAX_VALUE。

Answer 3

你需要一些paragraphs（这里是 JavaScript 数组）、一个result盒子（这里是 a <div>）和一个button（这里是 a... <button>）。

当您单击 时button，您想在 中添加paragraphs一个result。

var paragraphs = ['Lorem', 'ipsum', 'dolor', 'sit', 'amet'],
    nbParagraphs = paragraphs.length
    paragraph = null,
    result = document.getElementById('result'),
    button = document.getElementsByTagName('button')[0];

button.addEventListener('click', function() {
    /*
     * Math.random() return a number between 0 and 1
     * parseInt() return an integer (the 10 is here to say that we are in decimal)
     * parseInt(Math.random() * nbParagraphs, 10) return a number between 0 and the number of paragraphs, so we can use it to select a paragraph in the paragraphs array
     */
    paragraph = paragraphs[parseInt(Math.floor(Math.random() * nbParagraphs, 10))]
    result.innerHTML += '<p>' + paragraph + '</p>'
})

这是一个演示。