随机点名系统随机点名系统线上地址：http://beichenguren.gitee.io/random-call/

随机点名系统

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
    />
    <title>随机点名</title>
    <style>
      .content {
        position: relative;
        width: 500px;
        height: 350px;
        margin: 10% auto;

        border: 2px solid rgb(251, 0, 0);
        border-radius: 10px;
        background-image: url('https://img-qn-1.51miz.com/Element/00/58/64/19/4e80ec0a_E586419_e0c88bd5.jpg!/quality/90/unsharp/true/compress/true/format/jpg/fh/320');
        background-size: cover;
        background-position: center;
      }
      .content h3 {
        position: absolute;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        color: rgb(5, 5, 5);
        font-size: 30px;
        font-weight: bold;
        text-align: center;
      }
      .content input {
        position: absolute;
        top: 120px;
        left: 50%;
        transform: translateX(-50%);
        width: 250px;
        text-align: center;
        height: 30px;
        margin: 0 auto;
      }
      .content .iptFile {
        position: absolute;
        top: 126px;
        left: 293px;
        width: 250px;
        text-align: center;
        height: 30px;
        margin: 0 auto;
        z-index: 1;
        opacity: 0;
      }
      .content .btn {
        margin-top: 200px;
        margin-left: 50%;
        transform: translateX(-33%);
      }
      .content .btn button {
        width: 80px;
        height: 30px;
        border: none;
        border-radius: 5px;
        background-color: rgb(251, 0, 0);
        color: #fff;
        font-size: 16px;
        cursor: pointer;
      }
    </style>
  </head>

  <body>
    <div class="content">
      <input type="file" name="files" class="iptFile" />
      <h3>随机点名系统</h3>
      <input type="text" class="name" value="" placeholder="请选择文件" />
      <div class="btn">
        <button onclick="begin()">开始</button>
        <button onclick="over()">停止</button>
      </div>

      <output id="list"></output>
    </div>
  </body>
  <script>
    let inputName = document.querySelector('.name')
    let iptFile = document.querySelector('.iptFile')
    // js读取本地txt文件
    let arr = []
    function handleFileSelect(evt) {
      var files = evt.target.files // FileList object
      for (var i = 0, f; (f = files[i]); i++) {
        var reader = new FileReader()
        reader.onload = (function (theFile) {
          return function (e) {
            arr = e.target.result.split(',')
          }
        })(f)
        reader.readAsText(f)
      }
    }

    // 给input添加事件 change
    iptFile.addEventListener('change', handleFileSelect, false)
    // 功能：随意传入两个数字，则生成这两个数字之间的一个随机整数
    function getRandom(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min
    }

    // 定时器随机获取 arr 中的一个值
    let timer = null
    function begin() {
      if (arr.length == 0) {
        alert('请选择文件')
      } else {
        timer = setInterval(() => {
          let index = getRandom(0, arr.length - 1)
          inputName.value = arr[index]
          setTimeout(() => {
            clearInterval(timer)
          }, 2000)
        }, 10)
      }
    }
    // 5s后停止定时器

    // 停止定时器
    function over() {
      clearInterval(timer)
    }
  </script>
</html>
线上地址：beichenguren.gitee.io/random-call…