简易点名系统

最新推荐文章于 2021-06-10 14:57:07 发布

dukai954

最新推荐文章于 2021-06-10 14:57:07 发布

阅读量442

点赞数

本文链接：https://blog.csdn.net/dukai954/article/details/106978375

版权

简易点名

<!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元素,$("<div></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>

dukai954

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
简易点名系统

**简易点名**<!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:
复制链接

扫一扫