<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/css.css">
</head>
<body>
<div class="container">
<div class="title">
鄱阳湖点名册
</div>
<div class="select">
<div class="select_list">
<div class="list_title">
点名次数
</div>
<div class="list_num">
<span>
1
</span>
</div>
</div>
<div class="select_list">
<div class="list_title">
点名人数
</div>
<div class="list_num">
<select class="select_value">
<option value="1">1</option>
</select>
</div>
</div>
</div>
<div class="select_active">
</div>
<div class="select_active select_wei">
</div>
<div class="btn">
<button class="start">开始</button>
<button class="record">记录</button>
</div>
</div>
</body>
<script src="./js/stu.js"></script>
<script src="./js/rool.js"></script>
</html>
*{
margin: 0;
padding: 0;
}
body{
width: 100vw;
height: 100vh;
background: url(../images/bj.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
color: rgb(34, 50, 73);
}
.title{
text-align: center;
height: 80px;
line-height: 80px;
font-size: 35px;
font-weight: bold;
font-family: '宋体';
}
.select{
width: 40%;
margin-left: 30%;
display: flex;
}
.select .select_list{
width: 50%;
text-align: center;
line-height: 35px;
}
.select .select_list span{
width: 40px;
height: 22px;
line-height: 22px;
border-radius: 3px;
border: 1px solid rgba(255, 255, 255, 0.661);
display: inline-block;
background-color: rgb(255, 192, 203);
}
.select_value{
width: 40px;
height: 22px;
line-height: 22px;
border-radius: 3px;
border: 1px solid rgba(255, 255, 255, 0.661);
display: inline-block;
background-color: rgb(255, 192, 203);
outline: none;
}
.select_active{
width: 1160px;
min-height: 80px;
padding: 20px;
background-color: rgb(255, 255, 255,0.9);
border-radius: 9px;
margin-top: 25px;
transform: translateX(calc((100vw - 1200px)/2));
}
.select_active span{
width: 70px;
height: 70px;
line-height: 70px;
text-align: center;
border-radius: 50%;
display: inline-block;
margin-bottom: 10px;
margin-left: 10px;
color: rgb(255, 255, 255)
}
.select_active .boy{
background-color: rgb(121, 164, 194);
}
.select_active .girl{
color: black;
background-color: pink;
color: rgb(255, 255, 255)
}
button{
width: 50px;
height: 50px;
border-radius: 50%;
font-size: 16px;
color: #fff;
background-color:rgb(49, 69, 86);
outline: none;
border: 0;
position: fixed;
right: 20px;
bottom: 8%;
}
.start{
bottom: 17%;
}
button:active{
background-color: rgb(33, 47, 59);
}
.active{
color: #fff !important;
background-color: rgb(143, 203, 90) !important;
}
// 获取没有点名的元素盒子
let select_wei = document.querySelector('.select_wei');
// 获取到点到名字的元素盒子
let select_active = document.querySelector('.select_active')
// 获取到开始按钮
let start = document.querySelector('.start');
// 创建一个随机点名的计时器
let select_set = null;
//存储点过名的学生
let arr_stu = [];
// 创建一个空定时器，用来定义每隔一段时间就打乱学生顺序
let set_stu = null;
// 给按钮添加绑定onclick事件
start.onclick = function (){
clearInterval(set_stu);
clearInterval(select_set);
select_active.innerHTML = '';
if(start.innerText == '开始'){
// 如果按钮的文字是开始的话，，立刻让文字变成停止
start.innerText = '停止';
// 启动打乱学生顺序方法
set_student();
}else{
// 如果按钮的文字不是开始，就让文字立刻变成开始
start.innerText = '开始';
// 让学生名字停止乱动
stop_stu()
}
}
wei_stu(arr);
function wei_stu(array){
// 每次调用都会清空未点名的元素盒子
select_wei.innerHTML = '';
array = arr_luan(array);
// for in 循环遍历
for(var i in array){
// 加入相应的数据
create_span(array[i])
}
}
// 点击开始之后，名字随机乱动
function set_student(){
// 定义一个学生乱动的定时器
set_stu = setInterval(function (){
// 每隔一段时间学生就动一下
wei_stu(arr)
},100)
}
// 学生名字停止乱动
function stop_stu(){
// 清除定时器，相当于停止学生乱动
clearInterval(set_stu);
// 定时器停止后调用点名方法
select_student()
}
// 点名方法
function select_student(){
// 获取到没有点到名字元素下面所有的span标签
let span_arr = select_wei.querySelectorAll('span');
console.log(span_arr);
//存储点过名的学生
arr_stu = [];
select_set = setInterval(function (){
// 获取需要点名的人数
let select_value = document.querySelector('.select_value').value;
// 随机点一个同学的名字
let num = Math.floor(Math.random()* arr.length);
// 如果在没有点到名字的文本 不在点过名的学生的数组中，则执行代码
if(arr_stu.indexOf(span_arr[num].innerText) == -1){
arr_stu.push(span_arr[num].innerText);
let obj = {
name:span_arr[num].innerText,
sex:span_arr[num].className == 'boy' ? '男' : '女'
}
create_span(obj,1);
span_arr[num].classList.add('active');
}
if(arr_stu.length == select_value){
clearInterval(select_set)
}
},200)
}
// 创建span标签的方法
function create_span(obj,type){
// 创建一个新的span标签
let span = document.createElement('span');
// 判断传入的参数的性别给相应的class值
obj.sex == '男' ? span.className = 'boy' :span.className = 'girl';
// 把名字赋值给创建好的span标签文本
span.innerText = obj.name;
if(type == 1){
// 把创建好的span标签加入点到名的元素中
select_active.appendChild(span);
}else{
// 把创建好的span标签加入未点名的元素中
select_wei.appendChild(span);
}
}
// 打乱数组顺序的方法
function arr_luan(array){
// 进行一层深拷贝，防止数据错乱
let arr = JSON.parse(JSON.stringify(array));
// 创建一个新的数组，用来存储打乱后的数组数据
let newArr = [];
for(let i in array){
// 创建一个以arr.length为最大值的随机数
let num = Math.floor(Math.random() * arr.length);
// 把随机到的新数据加入新数组中
newArr.push(arr[num]);
// 把arr[num]的数据删除掉
arr.splice(num,1);
}
return newArr;
}
