Question

我已经在网站上搜索了答案，但是出现的答案与我编写的代码并不相似/不特定。我不知道如何修改代码，以免用户按下按钮生成另一个引号时引号不再重复。

var quotes = [
{
    quote: "\"Don't just exist, live\""
},
{
    quote: "\"Try to be a rainbow in someone's cloud\""
},
{
    quote: "\"Prove them wrong\""
},
{
    quote: "\"Find reasons to smile\""
},
{
    quote: "\"You get what you give\""
}
]

var quotebtn = document.getElementById('quote-btn');
var quote = document.querySelector('.quote');

quotebtn.addEventListener('click', () => {
let random = Math.floor(Math.random() * quotes.length);

quote.innerHTML = quotes[random].quote;
})

Answer 1

如果显示的内容不再重要，可以删除。您可以轻松地使用数组splice。

示例：

var quotes = [
    {
        quote: "\"Don't just exist, live\""
    },
    {
        quote: "\"Try to be a rainbow in someone's cloud\""
    },
    {
        quote: "\"Prove them wrong\""
    },
    {
        quote: "\"Find reasons to smile\""
    },
    {
        quote: "\"You get what you give\""
    }
    ]
    
    var quotebtn = document.getElementById('quote-btn');
    var quote = document.querySelector('.quote');
    
    quotebtn.addEventListener('click', () => {
    let random = Math.floor(Math.random() * quotes.length);
    
    quote.innerHTML = quotes[random].quote;
    quotes.splice(random, 1); // Trim one from the specified index.
    })

Answer 2

这应该为您工作

quotebtn.addEventListener('click', () => {
    if(quotes.length) {
        
        let random = Math.floor(Math.random() * quotes.length);
        quote.innerHTML = quotes[random].quote;
        quotes.splice(random, 1);
        
    } else {
        quote.innerHTML = "No more quotes!";
    }
})

quotes.splice(random, 1)从数组中删除已经出现的引号，以防止其重复

quotes清空后，将显示No more quotes!消息！

Answer 3

您可以使另一个数组具有与quotes数组相同的长度，并用零初始化。生成报价时，将与报价相同的索引处的新数组设置为1，这意味着该报价已生成。下次当您生成报价时，请首先检查报价是否已经生成，以及是否再次生成。

Answer 4

var quotes = [{
    quote: "\"Don't just exist, live\""
},{
    quote: "\"Try to be a rainbow in someone's cloud\""
},{
    quote: "\"Prove them wrong\""
},{
    quote: "\"Find reasons to smile\""
},{
    quote: "\"You get what you give\""
}];
quotes.sort(() => Math.random() - 0.5);
var quotebtn = document.getElementById('quote-btn');
var quote = document.querySelector('.quote');
var actualQuote = 0;
quotebtn.addEventListener('click', () => {
    if(actualQuote>=quotes.length){
        quote.innerHTML = "No more quotes";
    } else {
        quote.innerHTML = quotes[actualQuote % quotes.length].quote;
        actualQuote++;
    }
});

<button id="quote-btn">Quote</button><br>
<span class="quote"></span>

我只是在开始时对引号进行了混排。单击时，我显示第一个，然后显示下一个，依此类推。如果您希望它在最后一个条件后不停止运行，只需删除条件，它就会循环通过所有条件。因此，在最后一个之后，它将从头开始。

如何使随机报价生成器不重复报价

4 个答案: