divの色をランダムに変更するにはどうすればよいですか？

Question

私はボタンをクリックするたびに色がランダムに変化する四角いボックスを作ることに興味があります。唯一のことは、無作為にランダムな色を循環させることです（最大5秒間）。3/4のランダムなdivを黒にし、1つのdivをランダムに停止させたい色。

私はこのjsfiddle http://jsfiddle.net/cQB38/1/を見つけました。これは、私が望むものに近いですが、タイミング要素が含まれていません。 私はsetIntervalで遊んでみましたが、動作させることができませんでした。

HTML

<div onclick="change_color(2)" id="div_color_2" class="ne change_color" style="background-color: rgb(94, 198, 49);"> 
    </div> 

    <div onclick="change_color(3)" id="div_color_3" class="sw change_color" style="background-color: rgb(84, 51, 38);"> 
    </div> 

    <div onclick="change_color(4)" id="div_color_4" class="se change_color" style="background-color: rgb(169, 215, 220);"> 
    </div> 

    <!-- Random me button that selects a random color for each square --> 
    <input id="question" type="button" onclick="colorfy_me()" value="Random me"> 

    <!-- the squares --> 
    <p id="square1">Square 1</p> 

    <p id="square2">Square 2</p> 

    <p id="square3">Square 3</p> 

    <p id="square4">Square 4</p> 

JAVASCRIPT

var myColors = [ 
    '#7F8C8D', '#95A5A6', '#BDC3C7', '#003946', '#BDC3C7', 
    '#ECF0F1', '#BDC3C7', '#ECF0F1', '#C0392B', '#E74C3C', 
    '#D35400', '#E67E22', '#F39C12', '#F1C40F', '#22313f', 
    '#2C3E50', '#34495E', '#8E44AD', '#9B59B6', '#2980B9', 
    '#3498DB', '#27AE60', '#2ECC71', '#16A085' 
]; 

colorfy_me = function() { 
    var colors = myColors.slice(0) 

    $('div.change_color').each(function() { 
     // find a random color that's not already used. 
     var color = Math.floor(Math.random() * colors.length); 
     $(this).css('background-color', colors[color]); 
     $(this).html(colors[color]) 
     colors = colors.slice(0,color-1).concat(colors.slice(color+1,colors.length-1)) 

    }); 

    $.each(colors, function(i, v){ 
     $('#div_color_' + (+i + 1)).html(colors[i]) 
    }); 
} 

CSS

.nw{background: #f09; top: 0; left: 0; right: 50%; bottom: 50%} 

    .ne{background: #f90; top: 0; left: 50%; right: 0; bottom: 50%} 

    .sw{background: #009; top: 50%; left: 0; right: 50%; bottom: 0} 

    .se{background: #090; top: 50%; left: 50%; right: 0; bottom: 0} 

    html, body{width: 100%; height: 100%; padding: 0; margin: 0} 

    div{position: absolute; padding: 1em; border: 1px solid #000} 

    div { 
     -webkit-box-sixing: border-box; 
     -moz-box-sizing: border-box; 
     box-sizing: border-box; 
    } 

    #question { 
     position: absolute; 
     top: 44%; 
     left: 37%; 
     bottom: 50%; 
     color: red; 
     width: 30%; 
     height: 5%; 
     background-color: #fff; 
     border: 3px solid black; 
     text-align: center; 
     font-size: 24px; 
     border-radius: 30px; 
    } 

    #square1 { 
     position: absolute; 
     top: 20%; 
     left: 20%; 
     color: #fff; 
     font-weight: bold; 
     font-size: 24px; 
    } 

    #square2 { 
     position: absolute; 
     top: 20%; 
     left: 70%; 
     color: #fff; 
     font-weight: bold; 
     font-size: 24px; 
    } 

    #square3 { 
     position: absolute; 
     top: 70%; 
     left: 20%; 
     color: #fff; 
     font-weight: bold; 
     font-size: 24px; 
    } 

    #square4 { 
     position: absolute; 
     top: 70%; 
     left: 70%; 
     color: #fff; 
     font-weight: bold; 
     font-size: 24px; 
    } 

どれ解決策：これは、クリックごとに変更する色を取得しますjsfiddleからコード、ありますか？ ありがとうございます。

Answer 1

これは最も洗練された解決策ではありませんが、これを実現してください。 http://jsfiddle.net/0ot83fkn/2/

注それをキックオフするには、次

<input id="question" type="button" class="btn" onclick="changeColors()" value="Random me"> 

changeColors = function() { 
    // ... 
    setInterval(colorfy_me, randomInt(1, 5)); 
}