JS, JQuery to achieve random roll call system (small case)

parseInt() function

The parseInt() function can parse a string and return an integer.

parseInt(string, radix)
parseInt("10");			//返回 10
parseInt("19",10);		//返回 19 (10+9)
parseInt("11",2);		//返回 3 (2+1)
parseInt("17",8);		//返回 15 (8+7)
parseInt("1f",16);		//返回 31 (16+15)
parseInt("010");		//未定:返回 10 或 8

Insert picture description here

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
.box{
    
    
    width: 1000;
    height: 200;
    margin: 0 auto;
    margin-top: 100px;
    clear: both;

}
.name{
    
    
            width: 100px;
            height: 30px;
            float: left;
            background-color: antiquewhite;
            margin-left: 10px;
            margin-top: 10px;
            text-align: center;
            line-height: 30px;
         }
#btn{
    
    
           width: 100px;
           height: 30px;
           margin-left: 600px;
           margin-top: 50px;
          }
          #span{
    
     
            text-align: center;
            position: relative;
            top: 55px;
            right: 185px;
            color: rgb(133, 115, 115);
         }
 h1{
    
    
     text-align: center;
 }
    </style>
</head>
    <h1 >随机点名系统</h1>
    <h2 id="span"></h2>
    <!-- 这是一个父容器 -->
    <div id="box" class="box"></div>
<!-- 点名按钮 -->
<input type="button" value="开始" id="btn"/>


<script src="js/jquery-3.3.1.min.js"></script>
    
<script>
//创建后台虚拟数据
    let array=["肖绍霆","文鑫","向贞好","胥员员","李勇","熊明","杜凯","熊国良","付帅","龚文曦","吴世林","李鹏","宋小明","黄海","曾光鹏","墙世川","幸勇","彭清亮","杨崇鑫","王一舟","汪家鹏","高茂鑫","张松恒","杨海峰","付杨恒","唐浩翔","张攀"]
//获取一个父元素
let box=document.getElementById("box");
for (let i = 0; i < array.length; i++) {
    
    
 //创建一个新元素
 let div=document.createElement("div")  //<div></div>
 div.innerHTML=array[i]   
 //自动生成name                         //<div>zhangsan</div>
div.className="name"                    //<div class='name'>zhangsan</div>
 box.appendChild(div)
}

 //点名
let btn=document.getElementById("btn");
btn.onclick=function(){
    
    
    if(this.value==="开始"){
    
    
        //定时
        timeId=setInterval(function(){
    
    
            //清空所有颜色
            for (let j = 0; j < array.length; j++) {
    
    
               box.children[j].style.background="";
            }                                                                                                  

            //留下当前元素
            let random=Math.floor(Math.random()*array.length)
            box.children[random].style.background="red";
        },200);
this.value="停止";
    }else{
    
    
        //清除计时器

        clearInterval(timeId);
        this.value="开始";
    }
}
//设置时间
        let time =function(){
    
    
           let day=new Date().toLocaleString();
           $("#span").text(day);
        } 
    setInterval("time()",1000);
</script>
</body>

</html>

Guess you like

Origin blog.csdn.net/weixin_47785112/article/details/106947320