原生JS点名器

最新推荐文章于 2023-04-28 10:25:25 发布

Kevin_&chen

最新推荐文章于 2023-04-28 10:25:25 发布

阅读量538

点赞数

分类专栏： JS 文章标签： js

本文链接：https://blog.csdn.net/weixin_38644118/article/details/92971008

版权

JS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE type='html'>
<html>
    <head>
        <title>js点名器</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <style type="text/css">

            * {
                margin: 0px;
                padding: 0px;
                border: 0px;
            }
            #name {
                position: relative;
                width: 200px;
                height: 80px;
                top: 50px;
                background-color: greenyellow;
                border-radius: 5px;
                left: 10px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 40px;
                border: grey solid 1px;
            }
            #start {
                position: relative;
                width: 200px;
                height: 60px;
                top: 240px;
                background-color: blue;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 25px;
                font-size: 30px;
                cursor: pointer;
                border: red solid 1px;
            }
        </style>
    </head>
    <body>
    <center>
        <div style="width: 400px;height: 400px;border: red solid 2px;">
            <center><div id="name"></div></center>

           <button id="start">开始</button>
        </div>
    </center>
        <script type="text/javascript">
            var namelist = ["乔峰", "段誉", "虚竹", "丁春秋", "慕容复", "慕容博", "萧远山", "南海鳄神","鸠摩智","天山童姥"];
            var start = document.getElementById("start");
            var name  = document.getElementById('name');
            start.onclick=function () {
                var startname = start.innerHTML;
                if(startname == '开始'){
                    start.innerHTML = '结束';
                    timeId = setInterval(function(){
                        var num = (parseInt(Math.random()*10));
                        document.getElementById('name').innerHTML = namelist[num];
                    },200);
                }else{
                    start.innerHTML = '开始';
                    clearInterval(timeId);
                }
            }

        </script>
    </body>

</html>