Question

我有兴趣制作一个四方形的盒子，每当我点击一个按钮时，颜色会随机变化。唯一的问题是我希望他们在随机的时间段（最多5秒）内循环随机颜色，此时我喜欢3/4随机div变为黑色和1 div为停止随机颜色。

我找到了这个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));
}

如何在随机的时间段内随机更改div颜色？

1 个答案: