【格子颜色开始随机的时候会随机三个橙色 _函数 _操作DOM 】

格子颜色开始随机的时候会随机三个橙色

我也踩过这个坑( 7 )

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

回答(2)

函数操作DOM

详细描述

截图

代码

/*首先取出这九个格子*/
var box = document.getElementsByClassName("box");

/*遍历9个格子重置颜色*/
function reset() {
    for (var i = 0; i < box.length; i++) {
        box[i].style.background = "#fea500";
    }
}

/*做一个随机颜色函数返回随机颜色*/
function color() {
    var r, g, b;
    r = Math.floor(Math.random() * 256);
    g = Math.floor(Math.random() * 256);
    b = Math.floor(Math.random() * 256);
    return 'rgb(' + r + ',' + g + ',' + b + ')';
}

/*开始闪*/
function change() {//随机抽取三个格子变色
    reset();
    var a = [];//定义一个放格子下标的空数组

    for (var i = 0; i < 3; i++) {//遍历空数组并在空数组存放格子下标0~8中任意的三个
        a[i] = Math.floor(Math.random() * 9);
    }

    if (a[0] != a[1] && a[0] != a[2] && a[1] != a[2]) {//如果抽出的任意三个下标互不相等则将这三个下标所对应的格子变色
        box[a[0]].style.background = color();
        box[a[1]].style.background = color();
        box[a[2]].style.background = color();
    }


}

var z;//定义一个名叫z的全局变量
function start() {//触发变色
    clearInterval(z);//停止周期调用函数
    z = setInterval("change()", 1000);//将周期调用函数放入z变量并直接触发
}

/*结束闪*/
function stop() {//停止变色并重置
    clearInterval(z);//停止周期调用函数
    reset();
}

编辑于2024-11-18

时间排序

热门排序

[武汉|结业弟子]JS-孟晨
0

你这个其实并不是随机取到了三种一样的颜色，而是你这个是只在取得的三个下标不相等的情况下变色，随机如果出现了3个相等下标是不会变色的
所以需要在抽取下标时加判断抽到重复的就重抽，或抽到一样的就删掉重抽等多种方法都可以解决

查看全部>

编辑于2018-08-23
[无名弟子]卫鑫
0

var r = Math.floor(Math.random() * 256);//定义的颜色R
var g = Math.floor(Math.random() * 256);//定义的颜色G
var b = Math.floor(Math.random() * 256);//定义的颜色B
return `rgb(${r},${g},${b})`;//定义出十六禁止颜色(上标点为ES6新的表示符号)

查看全部>

编辑于2018-12-09

去第页