ランダムbgColor：クリックごとに色が異なる可能性はありますか？

Question

ボタンをクリックするたびにランダムに色が変わる背景があります。クリックごとに色が異なることを確認することは可能ですか（同じ色が2〜3回連続して生成される可能性を回避します）。 .jsファイルのソースコードは次のとおりです（HTMLは基本的にボタンです）。

var bgcolorlist, btn; 
function newColor() { 
    bgcolorlist = '#'+Math.floor(Math.random()*16777215).toString(16); 
    document.body.style.backgroundColor = bgcolorlist; 
} 
function initAll() { 
    btn = document.getElementById('click1'); 
    btn.addEventListener('click', newColor, false); 
} 
initAll(); 

Answer 1

次のことを試してみてください。

var bgcolorlist, btn; 
var colorList = []; 
function newColor() { 
    bgcolorlist = '#'+Math.floor(Math.random()*16777215).toString(16); 
    while(colorList.indexOf(bgcolorlist) != -1){ 
    bgcolorlist = '#'+Math.floor(Math.random()*16777215).toString(16); 
    } 
    colorList.push(bgcolorlist); 
    document.body.style.backgroundColor = bgcolorlist; 
} 
function initAll() { 
    btn = document.getElementById('click1'); 
    btn.addEventListener('click', newColor, false); 
} 
initAll(); 

Answer 2

ここで以前に生成された色のセットに一定時間のルックアップとバージョンがあります。カラー配列が大きくなった場合には、使用されているカラー配列に対してこの方法を使用すると、速度が大幅に向上します。

var usedColors = {}; 
function randomColor() { 
    return Math.floor(Math.random() * 0xFFFFFF).toString(16); 
} 
function unusedColor() { 
    var color; 
    while ((color = randomColor()) in usedColors); 
    usedColors[color] = true; 
    return '#' + color; 
} 
window.onload = function() { 
    document.body.style.backgroundColor = unusedColor(); 
}; 

Answer 3

この戦略は、（新旧）、各チャンネルを比較して、チャネルごとに少なくとも最小の変化（しきい値）

function getChannelColor(color, threshold){ 
 
    var _new = 0; 
 
    var _tooCloseMin = color - threshold; 
 
    var _tooCloseMax = color + threshold; 
 

 
    do { _new = Math.floor(Math.random() * 256); } 
 
    while (_tooCloseMin < _new && _new < _tooCloseMax); 
 

 
    return _new; 
 
} 
 

 
setInterval(function(){ 
 
    var target = document.getElementById("target"); 
 
    var threshold = 5; 
 

 
    var prevRGB = getComputedStyle(target).backgroundColor.match(/\d+/g); 
 
    var prevR = parseInt(prevRGB[0]); 
 
    var prevG = parseInt(prevRGB[1]); 
 
    var prevB = parseInt(prevRGB[2]); 
 

 
    var newR = getChannelColor(prevR, threshold); 
 
    var newG = getChannelColor(prevG, threshold); 
 
    var newB = getChannelColor(prevB, threshold); 
 
    
 
    target.style.backgroundColor = "rgb(" + newR + ", " + newG + ", " + newB + ")"; 
 
}, 1000);

#target{ 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 1em; 
 
    background-color: rgb(255, 255, 255); 
 
}

<div id="target"></div>