我寫了以下代碼來隨機改變背景顏色，但有時兩種顏色會相繼重復....。你認為我怎樣才能寫出這段代碼，使兩種顏色不會一個接一個地重復出現？
。const colors = ["green"/span>, "red", "rgba(133,122,200)", "#f15025"】。]
const btn = document.getElementById("btn") 。
const color = document.querySelector(".color") 。
btn.addEventListener("click", function(>/span>) {
const randomNumber = getRandomNumber()
document.body.style.backgroundColor = colors[randomNumber] 。
color.textContent = colors[randomNumber].
})
function getRandomNumber（）{
return Math.floor(Math. random() * colors.length)
}<h2>/span>background color : <span class="color"/span>> #f1f5f8</span></h2>
< button class="btn btn-hero" id="tn"> 點擊我</button>/span>uj5u.com熱心網友回復：
這種情況會發生，因為它是完全隨機的，你可能會再次得到相同的數字。
你可以放一個while回圈，以確保你每次都得到一個新的顏色。保持一個持續運行的回圈，除非你得到一個新的數字。
這里prevNumber被用來跟蹤之前的數字。
const colors = ["green"/span>, "red", "rgba(133,122,200)", "#f15025"】。]
const btn = document.getElementById("btn") 。
const color = document.querySelector(".color") 。
let prevNumber = 0;
btn.addEventListener("click", function() {
let randomNumber = getRandomNumber();
while( randomNumber == prevNumber){
randomNumber = getRandomNumber()。
}
prevNumber = randomNumber;
document.body.style.backgroundColor = colors[randomNumber] 。
color.textContent = colors[randomNumber].
})
function getRandomNumber（）{
return Math.floor(Math. random() * colors.length)
}<h2>/span>background color : <span class="color"/span>> #f1f5f8</span></h2>
< button class="btn btn-hero" id="tn"> 點擊我</button>/span>uj5u.com熱心網友回復：
你可以保存最后生成的數字。如果這個數字再次出現，就再弄一個。
。const colors = ["green"/span>, "red", "rgba(133,122,200)", "#f15025"】。]
const btn = document.getElementById("btn") 。
const color = document.querySelector(".color") 。
let last = -1.
btn.addEventListener("click", function() {
let randomNumber = getRandomIndex()
document.body.style.backgroundColor = colors[randomNumber] 。
color.textContent = colors[randomNumber].
})
function getRandomIndex（）{
let randomIndex = Math.floor（Math. random() * colors.length)
if (randomIndex == last) {
return randomIndex = getRandomIndex()
} else {
last = randomIndex
return randomIndex
}
}<h2>/span>background color : <span class="color"/span>> #f1f5f8</span></h2>
< button class="btn btn-hero" id="tn"> 點擊我</button>/span>uj5u.com熱心網友回復：
目前的兩個答案都是完全可以的。
。const colors = ["green"/span>, "red", "rgba(133,122,200)", "#f15025"】。]
const btn = document.getElementById("btn") 。
const color = document.querySelector(".color") 。
let currentColor = colors.pop（）。
btn.addEventListener("click", function(>/span>) {
const randomNumber = getRandomNumber()
document.body.style.backgroundColor = colors[randomNumber] 。
color.textContent = colors[randomNumber].
})
function getRandomNumber（）{
const chosen = Math.floor(Math. random() * colors.length)
const newColor = colors[choose];
colors.splice(choosen,1, currentColor)。
currentColor = newColor。
return chosen;
}<h2>/span>background color : <span class="color"/span>> #f1f5f8</span></h2>
< button class="btn btn-hero" id="tn"> 點擊我</button>/span>這樣，你就可以防止當前的顏色被選中，一旦隨機化完成，你就可以插入遺漏的顏色，同時洗掉新選中的顏色
。uj5u.com熱心網友回復：
寫closure像noConsecutiveRandom來獲得亂數但不連續重復。
const colors = ["green"/span>, "red", "rgba(133,122,200)", "#f15025"】。]
const btn = document.getElementById("btn") 。
const color = document.querySelector(".color") 。
function noConsecutiveRandom（size） {
let last;
return function rand（） {
const cur = Math.floor（Math.random（） * size）。
return cur == last ? rand() : (last = cur) 。
};
}
const getRandomNumber = noConsecutiveRandom(color.length)。
btn.addEventListener("click", function() {
const randomNumber = getRandomNumber()
document.body.style.backgroundColor = colors[randomNumber] 。
color.textContent = colors[randomNumber].
})<h2>/span>background color : <span class="color"/span>> #f1f5f8</span></h2>
< button class="btn btn-hero" id="tn"> 點擊我</button>/span>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/319981.html
標籤：