js点名器

最新推荐文章于 2022-10-30 16:09:04 发布

前端、瑞

最新推荐文章于 2022-10-30 16:09:04 发布

阅读量197

点赞数

文章标签： html css javascript

本文链接：https://blog.csdn.net/Xuruij/article/details/108939176

版权

js点名器

点击、炫动、随机出现一个名字
在这里插入图片描述

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            font-size: 16px;
        }
        .box{
            width: 500px;
            height: 500px;
            background-color: #000;
            margin: 0 auto;
        }
        span{
            display: inline-block;
            width: 65px;
            height: 30px;
            background-color: #f70;
            margin: 15px 15px;
            text-align: center;
            font-weight: bold;
            line-height: 30px;
            color: #fff;
        }
        #but{
            width: 150px;
            height: 50px;
            background-color: blue;
            color: #000;
            margin: 0 auto;
            color: #fff;
            border: none;
            outline: none;
            display: inline-block;
            margin: 10% 30%;
        }
        .box span.active{
            background-color: #fff;
            color: blue;
        }
    </style>
</head>
<body>
    <div class="box">
        <span class="active">a1</span>
        <span>a2</span>
        <span>a3</span>
        <span>a4</span>
        <span>a5</span>
        <span>a6</span>
        <span>a7</span>
        <span>a8</span>
        <span>a9</span>
        <span>a10</span>
        <span>a11</span>
        <span>a12</span>
        <span>a13</span>
        <span>a14</span>
        <span>a15</span>
        <span>a16</span>
        <span>a17</span>
        <span>a18</span>
        <span>a19</span>
        <span>a20</span>
        <span>a21</span>
        <span>a22</span>
        <span>a23</span>
        <span>a24</span>
        <span>a25</span>
        <button id="but">开始点名</button>
    </div>

    <script>
        var spans=document.getElementsByTagName("span");
        var but=document.getElementById("but");
        but.onclick=function()
        {
            but.disabled=true;
            var timerid=setInterval(function()
            {
                var index=parseInt(Math.random()*spans.length);
                document.querySelector(".box span.active").className="";
                spans[index].className="active";
            },200)
            setTimeout(function()
            {
                clearInterval(timerid)
                var spana=document.querySelectorAll("span")
                but.disabled=false

                for(var i=0;i<=spana.length;i++)
                {
                    if(spana[i].className=="active")
                    {
                        alert(spana[i].innerHTML)
                    }
                }
            },3000)
        }
    </script>
</body>
</html>

前端、瑞

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js点名器

js点名器点击、炫动、随机出现一个名字代码如下（示例）：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <styl
复制链接

扫一扫