js实现随机点名

浪漫季

已于 2023-01-18 11:54:34 修改

阅读量994

点赞数

文章标签： javascript 前端 css

于 2023-01-18 01:50:53 首次发布

本文链接：https://blog.csdn.net/lishunyu1226/article/details/128722510

版权

js实现随机点名

内容
原理
html
css
js

内容

分为上下两个部分，上方为显示区域，下方为控制区域。显示区域显示基地所有成员的工号和姓名，控制区域由开始和结束两个按钮组成。点击开始按钮，显示区域里的内容开始滚动，点击结束按钮，内容滚动停止，随机显示一位成员的工号和姓名。

原理

先创建数组储存数据，然后设置定时器选择的值全等于“点名”二字则执行停止或成功点名，再设置定时开启内容函数，获取随机选中的结果函数可解析一个字符串,并返回一个整数。

html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>基于JavaScript的随机点名工具</title>>
</head>
<body>
    <h1>软件开发创新基地点名</h1>
    <span id="span"></span>
    <div class="box" id="box"></div>
    <input type="button" id="btn" value="点名" />
</body>
</html>

css

body {
            background-color: #ffffff;
        }

        h1 {
            text-align: center;
        }

        .box {
            width: 1000px;
            height: 240px;
            margin: 0 auto;
            margin-top: 100px;
            clear: both;
        }

        #btn {
            width: 100px;
            height: 30px;
            margin-left: 600px;
            margin-top: 50px;
        }

        .name {
            width: 100px;
            height: 30px;
            float: left;
            background-color: antiquewhite;
            margin-left: 10px;
            margin-top: 10px;
            text-align: center;
            line-height: 30px;
        }

        #span {
            float: right;
            position: relative;
            top: 55px;
            right: 185px;
        }

js

<script>
    var arrs = ["1","2","3","4","5","6","7","8",
            "9","10","11","12","13","14","15","16","17","18"
            ,"18","20","21","22","23","24","25","26","27","28"
            ,"29","30","31","32","33","34","35","36"];
    var boxNode = document.getElementById("box");
       for (var i = 0; i < arrs.length; i++) {
            var divNode = document.createElement("div");
            divNode.innerHTML=arrs[i];
            divNode.className="name";
        boxNode.appendChild(divNode);
        }
        var btn= document.getElementById("btn");
        btn.onclick = function () {
           if(this.value==="点名"){
         //设置定时器：每过100毫秒、执行一次下方的setTimes函数 并使用 timeId进行接收定时后的结果
                timeId=setInterval("setTimes()",100);
                this.value="停止";//本次按钮的内容被赋值为停止 
            }else{
                clearInterval(timeId);
                this.value="点名";//本次按钮的内容被赋值为点名
            }
        }
        // 设置定时器内容函数
[video(video-sobAW3g8-1674014033163)(type-csdn)(url-https://live.csdn.net/v/embed/270710)(image-https://video-community.csdnimg.cn/vod-84deb4/61c825f0968f71edb3876723b78e0102/snapshots/040fee98b8a8470393d8b51e6a36fe29-00001.jpg?auth_key=4827577814-0-0-f53f177897a3654d56f5b0d354c97678)(title-随机点名工具)]

[video(video-J6MFO1ND-1674014041228)(type-csdn)(url-https://live.csdn.net/v/embed/270710)(image-https://video-community.csdnimg.cn/vod-84deb4/61c825f0968f71edb3876723b78e0102/snapshots/040fee98b8a8470393d8b51e6a36fe29-00001.jpg?auth_key=4827577814-0-0-f53f177897a3654d56f5b0d354c97678)(title-随机点名工具)]

        function setTimes () {
                   for (var j = 0; j < arrs.length; j++) {
                          //将父节点数组中的每一个元素的背景颜色清空
                        boxNode.children[j].style.background="";
                    }
                    // 获取随机选中的结果
                    var random = parseInt(Math.random()*arrs.length);
                  //将父节点数组中的随机被选中元素的背景颜色设置为红/
                    boxNode.children[random].style.background="red";
                }
         
    </script>