JS之随机点名系统

来源：互联网发布：书生商友seo 编辑：程序博客网时间：2024/05/16 05:58
<!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>
这里是利用了一个假数据来模拟后台数据，元素都是通过数据的个数创建的，所以在这里如果需要添加和删除成员，只需对数据进行修改即可。
阅读全文
0 0