Js简易老虎机案例-CSDN博客

本文链接：https://blog.csdn.net/weixin_53103836/article/details/112711897

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .out{
            width: 100px;
            height: 300px;
            float: left;
        }
        .out1{
            width: 100px;
            height: 300px;
            float: left;
        }
        .out2{
            width: 100px;
            height: 300px;
            float: left;
        }
        div{
            width: 100px;
            height: 100px;
        }
        div:nth-child(1){
            background-color: #a3ff6f;
        }
        div:nth-child(2){
            background-color: cyan;
        }
        div:nth-child(3){
            background-color: coral;
        }
        #two :nth-child(1){
            background-color: cornflowerblue;
        }
        #two :nth-child(2){
            background-color: #ffc4bc;
        }
        #two :nth-child(3){
            background-color: #ffa2f1;
        }
        #three :nth-child(1){
            background-color: #ffcb56;
        }
        #three :nth-child(2){
            background-color: #b9ffd2;
        }
        #three :nth-child(3){
            background-color: #8768ff;
        }
    </style>
</head>
<body>
<input type="button" value="开始" onclick="f1()">
<input type="button" value="停止" onclick="f2()">
<hr>
<div id="one" class="out">
    <div id="d1">1</div>
    <div id="d4">4</div>
    <div id="d7">7</div>
</div>
<div id="two" class="out1">
    <div id="d2">2</div>
    <div id="d5">5</div>
    <div id="d8">8</div>
</div>
<div id="three" class="out2">
    <div id="d3">3</div>
    <div id="d6">6</div>
    <div id="d9">9</div>
</div>
</body>
<script>
    let dd1 = document.getElementById("d1");
    let dd2 = document.getElementById("d2");
    let dd3 = document.getElementById("d3");
    let dd4 = document.getElementById("d4");
    let dd5 = document.getElementById("d5");
    let dd6 = document.getElementById("d6");
    let dd7 = document.getElementById("d7");
    let dd8 = document.getElementById("d8");
    let dd9 = document.getElementById("d9");
    let arr=[dd1,dd2,dd3,dd4,dd5,dd6,dd7,dd8,dd9]
    let i = 0;
     function f () {
        if (i == 9) {
            i = 0;
            arr[8].style.background = "";
        }
        if (i > 0) {
            arr[i-1].style.background = "";
        }
        arr[i].style.cssText = "background-color: red;";
        i++;
    }
    function f1() {
        s1 = setInterval(f,300)
    }
    function f2() {
     clearInterval(s1)
    }
</script>
</html>

懂的都懂