【如何获取三个随机格子 _事件】

如何获取三个随机格子
我也踩过这个坑( 1 )
已统计您的踩坑,无需重复点击
回答(0)
事件
详细描述
截图
代码
js代码
//获取事件源
var sudoku = document.getElementsByClassName("box");
//获取颜色
function color() {
    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);
    //return "rgb("+r+","+g+","+b+")";
    return `rgb(${r},${g},${b})`; //所有方法的拼接都可以用ES6新特性`其他字符串{$变量名}`替换
}
//获取随机格子
function getRandom() {
    var list = Array.from(sudoku); //将集合转化为数组
    var result = [];
    for (var i = 0; i < 3; i++) {
        var x = Math.floor(Math.random() * list.length);
        result.push(list.splice(x, 1)[0]); //将随机选择的对象删除，且返回添加给空数组
    }
    return result;
}
//改变颜色
function changeColor() {
    //重置颜色
    for (var i = 0; i < sudoku.length; i++) {
        sudoku[i].style.backgroundColor = "orange";
    }
    var result = getRandom();
    for (var i = 0; i < result.length; i++) {
        result[i].style.backgroundColor = color();
    }
}


//声明变量作为定时器开关。
var startButton;
//开始
function start() {
    //重置定时器
    clearInterval(startButton);
    startButton = setInterval("changeColor()", 1000);
}
//停止
function stop() {
    for (var i = 0; i < sudoku.length; i++) {
        sudoku[i].style.background = "orange";
    }
    clearInterval(startButton);
}
css代码
.html{
    font-size: 312.5%;
}

body {
    margin: 0;
}

.box {
    float: left;
    margin: 1%;
    border-radius: 10%;
    padding-left: 31.33%;
    padding-bottom: 31.33%;
    background-color: orange;
}

button {
    width: 100%;
    padding: 5% 0;
    margin-bottom: .5rem;
    border: 1px solid orange;
    border-radius: .5rem;
    font-size: 1rem;
    outline-style: none;
    color: orange;
    background: white;
}

button:hover {
    color: white;
    background: orange;
}

html代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>九宫格</title>
    <link rel="stylesheet" type="text/css" href="task1.css"></link>
</head>

<body>
    <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>
    <button onclick="start()">开始闪</button>
    <button onclick="stop()">结束闪</button>
    <script type="text/javascript" src="task1.js"></script>
</body>

</html>
编辑于2024-11-22