原生js 实现点名功能

最新推荐文章于 2024-10-31 20:03:58 发布

向来缘浅*奈何情深

最新推荐文章于 2024-10-31 20:03:58 发布

阅读量247

点赞数

分类专栏： js

本文链接：https://blog.youkuaiyun.com/weixin_43624523/article/details/89851646

版权

js 专栏收录该内容

6 篇文章

订阅专栏


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{
        margin: 0;
        padding: 0;

    }
    #Largeframe{
        margin: 100px auto;
        width: 800px;
        /* height: 600px; */
        border: 1px aqua solid;
        text-align: center;
    }
    .content li{
        vertical-align: top;
        display: inline-block;
        width: 100px;
        height: 50px;
        border: 2px chartreuse solid;
        margin: 5px;
        line-height: 50px;
        font-size: 22px;
        text-align: center;
        /* position: relative;
        left: 7px; */
        border-radius: 15px;

    }
    .content li.change{
        background-color: blue;
        color: #FFFFFF;
        font-weight:bolder;
    }
    button{
        display: inline-block;
        width: 100px;
        height: 50px;
        border-radius: 10px;
        margin-top: 20px;
        background-color: #ffffff;
        border: none;
        outline: none;
        cursor: pointer;
    }
    .Picturesandinformation{
        position: absolute;
        top: 520px;
        border: 1px aquamarine solid;
        width: 180px;
        height: 180px;
    }
    .Picturesandinformation img{
        position: absolute;
        left: 0;
        bottom: 0;
    }
   
    </style>
</head>
<body>
    <div id="Largeframe">
        <ul class="content"></ul>
        <button class="start">开始</button>
        <button class="over">结束</button>
        <div class="Picturesandinformation">
            <span>恭喜你:</span>
            <span class="mlno"></span>
            <span>你被点名了</span>
            <img src="./1.gif" alt="">
        </div>
    </div>
    <script>
        var contentAA = document.getElementsByClassName('content')[0];
        var startBB = document.getElementsByClassName('start')[0];
        var overCC = document.getElementsByClassName('over')[0];
        var oLi = document.getElementsByTagName('li');
        var arr = ["郭强", "诸泽涵", "张利宏", "高海波", "张东升", "高英伟", "秦超蒙", "麦腾阳", "吴金正", "马方岩", "尚义鹏", "赵建龙", "李旭斌", "张丰", "金豪", "王银鹏", "温壮", "田利明", "邱国军", "姚志强", "黎怡志", "张崇如", "高帅帅", "谷世龙", "陈娜", "常勇", "杨明豪", "段春林", "丛绍谨", "曾佑坤", "洪洋", "王永琪", "王阳", "陈宇"]
        var str = '';
        for(var i = 0; i < arr.length; i++){
            str += "<li>"+ arr[i] +"</li>"
        }
        contentAA.innerHTML = str;
        var timer = null;
        startBB.onclick = function(){
            console.log(startBB)
            clearInterval(timer);
            timer = setInterval(function(){
                var i = Math.floor(Math.random() * arr.length);
                for (var j = 0; j < oLi.length; j++){
                    oLi[j].className = "";

                }
                oLi[i].className = "change";
            },10);
        };
        overCC.onclick = function(){
            clearInterval(timer);
            var changeulo = document.getElementsByClassName('change')[0];
            var mlno = changeulo.innerText;
            var nameSpan = document.getElementsByClassName('mlno')[0];
            nameSpan.innerText = mlno;
        }
    </script>
</body>
</html>