大转盘2（简易）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #dalor{
            width: 400px;
            height: 400px;
            position: absolute;
            margin-top: -200px;
            margin-left: -200px;
            top: 50%;
            left: 50%;
        }
        #dalor div{
            position: absolute;
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
        }
        #dalor_go{
            position: absolute;
            width: 200px;
            height: 200px;
            top: 100px;
            left: 100px;
            line-height: 200px;
            background: red;
            color: white;
            text-align: center;
            border: none;
            cursor: pointer;
        }
        .dalor1{
            top: 0;
            left: 0;
            background: #FF9999;
        }
        .dalor2{
            top: 0;
            left: 100px;
            background: #CDCD66;
        }
        .dalor3{
            top: 0;
            left: 200px;
            background: #FF9999;
        }
        .dalor4{
            top: 0;
            left: 300px;
            background: #CDCD66;
        }
        .dalor5{
            top: 100px;
            left: 300px;
            background: #FF9999;
        }
        .dalor6{
            top: 200px;
            left: 300px;
            background: #CDCD66;
        }
        .dalor7{
            top: 300px;
            left: 300px;
            background: #FF9999;
        }
        .dalor8{
            top: 300px;
            left: 200px;
            background: #CDCD66;
        }
        .dalor9{
            top: 300px;
            left: 100px;
            background: #FF9999;
        }
        .dalor10{
            top: 300px;
            left: 0;
            background: #CDCD66;
        }
        .dalor11{
            top: 200px;
            left: 0;
            background: #FF9999;
        }
        .dalor12{
            top: 100px;
            left: 0;
            background: #CDCD66;
        }
        .blue{
            background: #40FFE5;
        }
    </style>
</head>
<body>
<div id="dalor">
    <input id="dalor_go" type="button" value="go!">
    <div class="dalor1 blue">1</div>
    <div class="dalor2">2</div>
    <div class="dalor3">3</div>
    <div class="dalor4">4</div>
    <div class="dalor5">5</div>
    <div class="dalor6">6</div>
    <div class="dalor7">7</div>s
    <div class="dalor8">8</div>
    <div class="dalor9">9</div>
    <div class="dalor10">10</div>
    <div class="dalor11">11</div>
    <div class="dalor12">12</div>
</div>
<script>
    window.onload=function () {
        var odar=document.getElementById("dalor").getElementsByTagName("div");
        var odarGo=document.getElementById("dalor_go");
        var suzi=0;
        odarGo.addEventListener("click",function () {
            var odartime=Math.ceil(Math.random()*24+24);
            var xunuantimu=setInterval(function () {
                odar[suzi%12].classList.remove("blue");
                // 当suzi=0时，取余为0，当为1时，取余为1以此类推，但当达到12时又回到了0~12；它会移除赋予它的颜色
                odar[(++suzi)%12].classList.add("blue");
                // 当suzi=0时，取余为1，当为1时，取余为2以此类推，它会赋予一个颜色，使每次转动时会变一下背景
                if (suzi%odartime==0){
                    // 当suzi与随机数的相等时，清空定时器
                   clearInterval(xunuantimu);
                }
            },100);
        });
    }

</script>
</body>
</html>
猜你喜欢
