js 定时器大转盘

最新推荐文章于 2024-05-16 11:44:55 发布

CodesMan

最新推荐文章于 2024-05-16 11:44:55 发布

阅读量138

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/waiting_area/article/details/123643644

版权

<style>
    * {
        margin: 0;
        padding: 0;
    }

    #box {
        width: 320px;
    }

    #btn,
    .bn {
        width: 100px;
        height: 100px;
        background-color: skyblue;
        display: inline-block;
        box-sizing: border-box;
        border: 1px solid black;
        overflow: hidden;
    }

    #btn {
        text-align: center;
        line-height: 100px;
        overflow: hidden;
    }
</style>

<body>
    <div id="box">
        <div class="bn">1</div>
        <div class="bn">2</div>
        <div class="bn">3</div>
        <div class="bn">4</div>
        <div id="btn">
            <button>开始</button>
            <button>结束</button>
        </div>
        <div class="bn">5</div>
        <div class="bn">6</div>
        <div class="bn">7</div>
        <div class="bn">8</div>
    </div>

    <script>
        var btn = document.getElementsByTagName("button")
        var bn = document.getElementsByClassName("bn")
        var timer = null;
        var i = [3, 0, 1, 2, 4, 7, 6, 5]
        var a =-1; //
        btn[0].onclick = function () {    
            clearInterval(timer) 
            timer = setInterval(function () {
                a++       
                for(j=0;j<i.length;j++){
                    if(j==a){
                        bn[i[j]].style.backgroundColor="#666565"
                    }else{
                        bn[i[j]].style.backgroundColor="skyblue"
                    }       
                } 
                if(a==i.length){ //当
                    a=-1
                }
                console.log(a)
            }, 100)
        }
        btn[1].onclick=function(){
            clearInterval(timer) 
        }
    </script>