JS之随机点名系统

最新推荐文章于 2023-11-16 23:59:17 发布

Mc_好先森

最新推荐文章于 2023-11-16 23:59:17 发布

阅读量1.3k

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/Mc_haoxiansen/article/details/78397346

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            background-color: aliceblue;
        }
        .box{
            width: 1000px;
            height: 240px;
            /*background-color: aqua;*/
            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;
        }
        h1{
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>随机点名系统</h1>
    <span id="span"></span>
    <div class="box" id="box"></div>
    <input type="button" id="btn" value="点名"/>
    <script>
//        获取id函数
        function my$(id){
            return document.getElementById(id)
        };
//        模拟后台数据
        var arr = ["吉帆","静慧","嘉歆","金枝","王大妈","老王","刘疙瘩","杨伟",
          "韩晁","静涵","静曼","晶晶","靓影","嘉宝","李静","李志","李伟","家美"
          ,"金枝","静恬","刘泽祥","静和","晶灵","立超","嘉懿","王欢","王欣","郭琦"
          ,"嘉美","王琦","洁静","小杨","佳思","吉玉","张焕","张赛","娟秀","菊月"
          ,"王晶","吉玟","王飞","皎洁","曾艳","王翠青"
      ];
//        动态创建层
        for(var i =0;i<arr.length;i++){
            var div = document.createElement("div");
            div.innerText=arr[i];
            div.className="name";
            my$("box").appendChild(div);
        };
//        点名
        my$("btn").onclick=function(){
            var peoples= arr.length;
//            监视按钮的状态
            if(this.value==="点名"){
//                定时针
                  timeId=setInterval(function () {
//                      清空所有层的颜色
                    for(var i =0;i<arr.length;i++){
                        my$("box").children[i].style.background=""
                    };
//                      留下当前层的颜色
                    var random = parseInt(Math.random()*peoples);
                    my$("box").children[random].style.background="red";
                },100);
                this.value="停止";
            }else{
//                清除计时器
                clearInterval(timeId);
                this.value="点名";
            };
        };

//        获取时间的函数
        getTime();
        setInterval(getTime,1000)
        function getTime(){
            var day = new Date();
            var year = day.getFullYear();//年
            var month = day.getMonth()+1;//月
            var dat = day.getDate();//日
            var hour = day.getHours();//小时
            var minitue = day.getMinutes();//分钟
            var second = day.getSeconds();//
            my$("span").innerText=year+"-"+month+"-"+dat+" "+hour+":"+minitue+":"+second
        }


    </script>
</body>
</html>

这里是利用了一个假数据来模拟后台数据，元素都是通过数据的个数创建的，所以在这里如果需要添加和删除成员，只需对数据进行修改即可。

Mc_好先森

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS之随机点名系统

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> body{ background-color: aliceblue; } .box{ width: 1000
复制链接

扫一扫