随笔- 6 文章- 0 评论- 0 阅读- 1010

js点名册

<!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;
}