JavaScript随机点名

最新推荐文章于 2023-03-14 21:07:42 发布

旺财飞飞飞

最新推荐文章于 2023-03-14 21:07:42 发布

阅读量1.1k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_52159312/article/details/121475574

版权

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .context{
            width: 1200px;
            margin: 0 auto;
            border: 1px solid grey;
            text-align: center;

        }
        .data > li{
            float: left;
            list-style: none;
            margin: 10px 20px;
            width: 100px;
            height: 50px;
            border: 5px solid grey;
            line-height: 50px;
            
        }
        .clearfix:after{
            content:".";
            display:block;
            height:0;
            clear:both;
            visibility:hidden
        }
        .clickUtil{
            width: 300px;
            margin: 0 auto; 
        }
        .clickUtil button{
            background: grey;
            width: 100px;
            height: 50px;
            margin: 10px 20px;
        }
        .clickUtil > div{
            padding-top: 20px;
            width: 300px;
            height: 250px;
            border: grey 1px solid; 
        }
        .clickUtil p{
            margin-top: 30px;
        }

        .backgroundColor{
            background-color: red;
        }
        

    </style>
</head>

<body>
    <div class="context">
        <ul class="data clearfix" id="data">
        </ul>
        <div class="clickUtil">
            <button id="start">开始点名</button>
            <button id="end">停止点名</button>
            <div>
                幸运儿是：
                <p id="result"></p>
            </div>
        </div>
       
    </div>
</body>
<script>

    const data = document.getElementById("data");
    const start = document.getElementById("start");
    const end = document.getElementById("end");
    const result = document.getElementById("result");
    let timer,name;

    let dataArr = ["张三","李四","王五","赵柳","田七","王八","钱久","孙是",
                    "张三","李四","王五","赵柳","田七","王八","钱久","孙是",
                    "张三","李四","王五","赵柳","田七","王八","钱久","孙是",
                    "张三","李四","王五","赵柳","田七","王八","钱久","孙是",
                    "张三","李四","王五","赵柳","田七","王八","钱久","孙是",
                    ];

    for (let text of dataArr) {
        let li = document.createElement("li");
        li.innerHTML = text;
        data.appendChild(li);
    }

    start.onclick = function(){
 
        clearInterval(timer);
        
        timer = setInterval(() =>{

            let index = Math.floor(Math.random()*dataArr.length);

            let liTag = data.children;

            for (const liAll of liTag) liAll.className = "";

            liTag = data.children[index];
         
            liTag.className = "backgroundColor";

            name = data.children[index].innerHTML;   
            
        },100)
    }

    end.onclick = function(){
        clearInterval(timer);
        result.innerHTML = name;

    }


</script>
</html>