利用js设计简单跑火车

最新推荐文章于 2024-10-10 09:56:47 发布

@@@厚积而薄发

最新推荐文章于 2024-10-10 09:56:47 发布

阅读量539

点赞数

文章标签： javascript html

本文链接：https://blog.csdn.net/haiyanzuibang/article/details/106323785

版权

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            text-align: center;
            color: white;
            font-size:24px;
        }
    
        ul{
            padding: 0;
            margin: 0;
            width: 640px;
            height: 640px;
            background-color:skyblue; 
            margin:0 auto;
            position: relative;
            border-radius: 4%;
            
        }
        ul li{
            width: 200px;
            height: 200px;
            background-color:pink;
            line-height: 200px;
            list-style: none;
            position: absolute;
            border-radius: 4%;
        }
        li:nth-child(1){
            top:0;
            left:0;
        }
        li:nth-child(2){
            top:0;
            left:220px;
        }
        li:nth-child(3){
            top:0;
            left:440px;
        }
        li:nth-child(4){
            top:220px;
            left:440px;
        }
        li:nth-child(5){
            top:440px;
            left:440px;
        }
        li:nth-child(6){
            top:440px;
            left:220px;
        }
        li:nth-child(7){
            top: 440px;
            left: 0;
    
        }
        li:nth-child(8){
            top:220px;
            left: 0;
        }
        li.active{
            background-color:orange;
        }
        button{
            width: 200px;
            height: 200px;
            font-size:30px;
            font-weight:bold;
            color:white;
            background-color: rgb(255, 0, 221);
            border-radius: 4%;
            position: absolute;
            top: 229px;
            left: 1434px;

        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li>暴瘦20斤</li>
            <li>脱单</li>
            <li>努力学习</li>
            <li>追星成功</li>
            <li>成为富婆</li>
            <li>考研成功</li>
            <li>事业有成</li>
            <li>遇见更好的自己</li>
        </ul>
         <button>2021年将发生的幸运事</button> 
    </div>

    <script>
            var lis = document.getElementsByTagName("li");
            var btn = document.getElementsByTagName("button")[0];
            
            var current = 0;
            var canClick = true;
            
            btn.onclick = function () {
                // 判断是否抽奖已经结束
                if (canClick) {
                    current %= 8;
                    console.log("点击了");
                    // 确定中将信息
                    var x = Math.floor(Math.random() * lis.length);
                    console.log("中奖信息", x);
                    //设置定时器  第一个参数是函数  第二个参数是时间
                    var id = setInterval(function () {
                        

                        console.log(current, current % 8);
                        
                        // 设定当前active 取消掉其他的active
                        for (var i = 0; i < lis.length; i++) {
                            if (i == current % 8) {
                                lis[i].classList.add("active");
                            } else {
                                lis[i].classList.remove("active");
                            }
                        }
                        // 判断 如果当前高亮的 就是中奖信息 停止定时器
                        
                        if (current == x + 8 * 10) {
                            // 取消本次抽奖的定时器
                            clearInterval(id);
                            // 设置可以进行下一次抽奖
                            canClick = true;
                        }
                    },100);
                }

                canClick = false;
            };
    </script>
</body>
</html>