基础版本随机点名

最新推荐文章于 2024-04-20 22:40:06 发布

原创最新推荐文章于 2024-04-20 22:40:06 发布 · 118 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #css3 #前端 #java

本文介绍了一个简单的随机点名器的实现过程，使用HTML、CSS和JavaScript构建网页应用，通过随机算法从预设的名字列表中选择姓名进行显示。


<!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>
    * {
      margin: 0;
      padding: 0;
    }

    h2 {
      text-align: center;
    }

    .box {
      width: 600px;
      margin: 50px auto;
      display: flex;
      font-size: 25px;
      line-height: 40px;
    }

    .qs {

      width: 450px;
      height: 40px;
      color: red;

    }

    .btns {
      text-align: center;
    }

    .btns button {
      width: 120px;
      height: 35px;
      margin: 0 50px;
    }
  </style>
</head>

<body>
  <h2>随机点名</h2>
  <div class="box">
    <span>名字是：</span>
    <div class="qs">这里显示姓名</div>
  </div>
  <div class="btns">
    <button class="start">开始</button>
    <button class="end">结束</button>
  </div>


  <script>
    const arr = ['马超', '黄忠', '赵云', '关羽', '张飞']

    function getRandom(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
    }

    const start = document.querySelector('.start')

    const qs = document.querySelector('.qs')

    const end = document.querySelector('.end')

    let id
    let i
    start.addEventListener('click', function () {
      if (id) {
        clearInterval(id)
      }

      id = setInterval(function () {
        i = getRandom(0, arr.length - 1)
        qs.innerHTML = arr[i]
      }, 30)

      if (arr.length === 1) {
        start.disabled = true
        end.disabled = true
      }
    })

    end.addEventListener('click', function () {
      clearInterval(id)
      arr.splice(i, 1)
    })

  </script>
</body>

</html>