【完成盒子随机后，绝大部分情况下是出现三个盒子变色的，但是偶尔却只会出现两个盒子；】

完成盒子随机后，绝大部分情况下是出现三个盒子变色的，但是偶尔却只会出现两个盒子；

我也踩过这个坑( 4 )

已统计您的踩坑,无需重复点击

回答(2)

详细描述

截图

代码

<body>
<div class="max">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div id="btn1">开始闪</div>
<div id="btn2">结束闪</div>

<script src="task1.js"></script>

var box = document.getElementsByClassName("box");
var start = document.getElementById("btn1");
var stop = document.getElementById("btn2");
var time;
function color() {
    var rgb;
    var r = Math.floor(Math.random()*256);
    var g = Math.floor(Math.random()*256);
    var b = Math.floor(Math.random()*256);
    rgb = 'rgb('+r+','+g+','+b+')';
    return rgb;
}
function getbox() {
    var one = Math.floor(Math.random()*list.length);
    var two = Math.floor(Math.random()*list.length);
    var three = Math.floor(Math.random()*list.length);
    if(one == two){
        one = Math.floor(Math.random()*list.length);
    }else if(two == three){
        two = Math.floor(Math.random()*list.length);
    }else if(one = three){
        three = Math.floor(Math.random()*list.length);

        box[one].style.backgroundColor = color();
        box[two].style.backgroundColor = color();
        box[three].style.backgroundColor = color();

    }
start.onclick = function () {
    this.style.backgroundColor = "#ffa500";
    this.style.color = "#fff";
    stop.style.backgroundColor = "#fff";
    stop.style.color = "#ffa500";
    clearInterval(time);
    time = setInterval(function(){
         for(var i = 0; i < 9; i++){
            box[i].style.backgroundColor = "";
         }
          getbox();
         },1000);
};
stop.onclick = function () {
    this.style.backgroundColor = "#ffa500";
    this.style.color = "#fff";
    start.style.backgroundColor = "#fff";
    start.style.color = "#ffa500";
    clearInterval(time);
    for(var i=0; i<9; i++){
            box[i].style.backgroundColor = "";
    }
};

编辑于2025-04-07

时间排序

热门排序

[深圳|结业弟子]JS-韩鹏
1

getbox()里的逻辑有问题，在取完3个盒子之后进行互相比较重新取值思路是对的，不过按照你的写法，在box1与box2相同时重取box1，然后box2跟box3相同时重取box2，之后box1跟box3比较。在这个过程中box1和box2改变后的值未进行比较，有概率重复。稍加修改如下：if(one!==two&&two!==three&&three!==one){box[one].style.backgroundColor=Color();box[two].style.backgroundColor=Color();box[three].style.backgroundColor=Color();}else{getbox();... 查看全部>

编辑于2019-05-19
[北京|]JS-
0

rgb颜色少了一个判断，如过rgb任何一个生成的数小于等于16，那么你生成的颜色就是五位数或者更少，这样的颜色是不会渲染的(三位特殊的除外) 查看全部>

编辑于2019-07-27

去第页