JavaScript_9_练习：随机点名

泠泠七弦上111

于 2024-08-20 21:29:29 发布

阅读量133

点赞数 4

分类专栏： JavaScript 文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/2301_81057751/article/details/141368933

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

效果图

代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>练习：随机点名</title>
  <style>
    div {
      margin: 50px auto;
      width: 500px;
      height: 300px;
      border: 3px solid #ccc;
      text-align: center;
    }

    div p {
      margin: 50px;
      font-size: 50px;
      color: red;
    }

    div button {
      margin: 20px;
      width: 90px;
      height: 40px;
    }
  </style>
</head>

<body>
  <div>
    <h2>随机点名</h2>
    <p>？？？</p>
    <button class="start">开始</button>
    <button class="end" disabled>结束</button>
  </div>
  <script>
    const arr = ['张三', '李四', '王五', '赵六', '冯七']
    const start = document.querySelector(".start")
    const end = document.querySelector(".end")
    const p = document.querySelector("p")
    let alter = 0
    let num = 0

    start.addEventListener("click", () => {
      alter = setInterval(() => {
        num = Math.floor(Math.random() * arr.length)
        p.innerText = arr[num]
      }, 25)
      start.disabled = true
      end.disabled = false
    })

    end.addEventListener("click", () => {
      clearInterval(alter)
      arr.splice(num, 1)
      if (arr.length === 1) {
        start.disabled = true
        end.disabled = true
      } else {
        end.disabled = true
        start.disabled = false
      }
    })
  </script>
</body>

</html>