如何隨機更改divs顏色隨機一段時間？

Question

我很感興趣的是製作一個四方盒子，當我點擊一個按鈕時顏色隨機變化。唯一的問題是，我希望他們隨機循環一段隨機時間（最多5秒），在這一點上，我希望3/4隨機div變成黑色，而1格則隨機停止顏色。

我發現這jsfiddle http://jsfiddle.net/cQB38/1/，這是接近我想要的，但沒有涉及的時間元素。 我試着玩setInterval，但我無法讓它工作。這是從的jsfiddle的代碼，它得到的顏色爲每次點擊更改：

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; 
    } 

任何解決方案？ 在此先感謝。

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)); 
}