简易点名系统

**

简易点名

**

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>点名系统</title>
<style>
 body{
            background-color: gray;
        }
        .box{
            width: 1000px;
            height: 280px;
            margin: 0 aAuto;
            margin-top: 100px;
            clear: both;
        }
        #btn,#btn2,#btn3,#btnStop{
            width: 150px;
            height: 50px;
            
            margin-top: 50px;
            font-size: 18px;
        }
        .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;
        }
		.high{
			background-color: #FFDEAD;
			font-weight:500;
		}
    </style>




</style>

</head>
<body>
  <h1>随机点名系统</h1>
  <span id="span"></span>
  <!-- 存放生成的名单div -->
  <div class="box"   id="box"></div> 
  <!-- 存放开始和停止按钮 -->
  <div style="text-align: center;">
     <input  type="button"  id="btn" value="点名"/>
     <input  type="button"  id="btnStop" value="停止"/> 
  </div>
</body>

<script  type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
//1.准备一个数组
var names=[
"肖绍霆",
"文鑫", 
"向贞好",
"胥员员",
"李勇",
"熊明",
"杜凯",
"熊国良",
"付帅",
"龚文曦",
"吴世林",
"李鹏",
"宋小明",
"黄海",
"曾光鹏",
"墙世川",
"幸勇",
"彭清亮",
"杨崇鑫",
"王一舟",
"汪家鹏",
"高茂鑫",
"张松恒",
"杨海峰",
"付杨恒",
"唐浩翔",
"张攀"
  ];
window.onload=function(){
    //获取box父类
     boxNode=document.getElementById("box");
     boxNode.innerHTML="";

   for(var i=0;i<names.length;i++){
     //1.创建div元素,$("
")
var divNode=document.createElement("div"); //2.设置div内容 ,名字 divNode.innerHTML =names[i]; // 设置div样式 divNode.className="name"; //3.添加到box boxNode.appendChild(divNode); } } let time=null; //开始点名 //点击开始按钮的时候开始定时器 $("#btn").click(function(){ //开始定时器 time=setInterval(function(){ //在所有的名单div中随机选择一个div设置背景颜色为红色 let index=Math.floor(Math.random()*names.length);//0-9.99 //清除之前的颜色 $("#box div").css("background-color",""); //找到生成的名单div中的index位的div let mySelector="#box div:eq("+ index + ")"; $(mySelector).css("background-color","green"); },100) }); $("#btnStop").click(function(){ clearInterval(time); }); </script> </html>

你可能感兴趣的:(简易点名系统)