抽奖

最新推荐文章于 2022-04-18 21:26:58 发布

moonlight201868

最新推荐文章于 2022-04-18 21:26:58 发布

阅读量160

点赞数

本文链接：https://blog.csdn.net/moonlight201868/article/details/80695022

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin: 0;padding: 0;list-style: none}
        #case{
            width: 400px;
            height:400px;
            margin: 100px auto;
            background-color: pink;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
        }

        .one{
            width: 100px;
            height: 100px;
            background-color: pink;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .two{
            width: 100px;
            height: 100px;
            background-color: red;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
        .three{
            width: 100px;
            height: 100px;
            background-color: #CDCD66;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .four{
            width: 100px;
            height:100px;
            background-color: blue;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        span{
            font-size: 50px;
            color: white;
            position: relative;
            top:-342px;
            left: 712px;
            cursor: pointer;
        }

    </style>
</head>
<body>
<div id="case">
    <div class="four">1</div>
    <div class="three">2</div>
    <div class="one">3</div>
    <div class="three">4</div>
    <div class="three">12</div>
    <li class="two"></li>
    <li class="two"></li>
    <div class="one">5</div>
    <div class="one">11</div>
    <li class="two"></li>
    <li class="two"></li>
    <div class="three">6</div>
    <div class="three">10</div>
    <div class="one">9</div>
    <div class="three">8</div>
    <div class="one">7</div>
</div>
<span>go!!</span>
<script>
    window.onload=function () {
        var one = document.getElementsByTagName("li")[0];
        var two = document.getElementsByTagName("li")[1];
        var three = document.getElementsByTagName("li")[2];
        var four = document.getElementsByTagName("li")[3];
        var div1 = document.getElementById("case");
        var div = div1.getElementsByTagName("div");
        var go = document.getElementsByTagName("span")[0];
        var num=0;
        var arr=[];
        var onoff=true;

        for (var m=0;m<div.length;m++){
            for(var j=0;j<div.length;j++){
                if((m+1)==div[j].innerHTML){
                    arr[m]=j;
                }
            }
        }

        function run() {
            if (onoff) {
                onoff=false;
                var start = setInterval(fn, 500);
                setTimeout(stop, Math.random() * 5000 + 3000);
                function stop() {
                    clearInterval(start);
                    onoff=true;
                }
            }
        }

         function fn() {
            num++;
            if(num>=div.length){
                num=0;
            }
            for(var i=0;i<div.length;i++){

                if(i==1||i==3||i==4||i==7||i==8||i==10||i==12){
                    div[i].className="three"
                }
                else{
                    div[i].className="one"
                }
            }
            div[arr[num]].className="four";

         }

        one.onclick =run
        two.onclick = run
        three.onclick = run
        four.onclick = run
        go.onclick = run

    }
</script>
</body>
</html>