简单的JS实现随机点名

最新推荐文章于 2023-01-14 16:59:29 发布

原创最新推荐文章于 2023-01-14 16:59:29 发布 · 728 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端基础 #JS入门

前端专栏收录该内容

4 篇文章

订阅专栏

这篇博客介绍了一个简单的JavaScript实现随机点名的方法。通过HTML结构和JS代码，作者展示了如何利用JavaScript从预设名单中随机选取名字，为课堂或活动提供趣味性的点名方式。

<!--CSS样式-->
<style>
    body{
        background: #3c3c3c;
    }
    #con{
        width: 800px;
        height: 400px;
        margin: 100px auto;
    }
    #con h1{
        color: #fff;
        font-size: 36px;
        text-align: center;
    }
    #con p{
        color: #fff;
        font-size: 36px;
        text-align: center;
    }
</style>

<div id="con">
    <h1>start</h1>
    <p>点击start开始随机点名</p>
</div>

<script>
    var con =document.getElementById("con");
    var h1=con.getElementsByTagName("h1");
    var p=con.getElementsByTagName("p");
    var arr=["德莱厄斯","无双剑姬","武器大师","吸血鬼","石头人","狗头人","掘墓人","天使",
        "船长","鳄鱼","压缩","瞎子","拉克丝","赵信","龙龟","龙女","龙王","艾克","寒冰"];
    var isStart=true;
    var timer1=null;
    h1[0].onclick=function () {
        if (isStart){
            h1[0].innerHTML="stop";
            timer1=setInterval(function () {
                var v=Math.floor((Math.random())*arr.length);
                p[0].innerHTML=arr[v];
            },1);
        }else {
            h1[0].innerHTML="start";
            clearInterval(timer1);
        }
        isStart=!isStart;
    }
</script>