js随机点名案例

伐木累!

已于 2024-02-08 16:13:11 修改

阅读量262

点赞数 4

分类专栏：前端笔记文章标签： javascript 前端 css3

于 2024-02-08 16:11:24 首次发布

本文链接：https://blog.csdn.net/weixin_46811890/article/details/136080089

版权

前端笔记专栏收录该内容

10 篇文章 4 订阅

订阅专栏

<!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>
  <style>
    .box {
      width: 500px;
      height: 200px;
      margin: 100px auto;
      text-align: center;
      border: 1px solid #999;
    }

    .box span {
      font-size: 20px;
    }

    .box button {
      width: 60px;
      height: 30px;
      margin: 30px 0px 0px 20px;
    }
  </style>
</head>

<body>
  <div class="box">
    <h3>随机点名器</h3>
    <span>2019-02</span><br />
    <button class="start">开始</button>
    <button class="stop" disabled>停止</button>
  </div>
  <script>
    // 获取元素
    let span = document.querySelector('.box span')
    const start = document.querySelector('.box .start')
    const stop = document.querySelector('.box .stop')
    // 定时器全局变量
    let timer = 0
    // 姓名随机全局变量
    let random = 0
    // 获取数据
    const personName = ['赵钱', '孙李', '周吴', '郑王', '冯陈', '褚卫', '蒋沈', '韩杨']
    // 设置按钮监听事件
    // 开始
    start.addEventListener('click', function () {
      // 点击"开始",启用定时器,"停止"按钮false
      start.disabled = true
      stop.disabled = false
      timer = setInterval(function () {
        // 生成随机数
        random = Math.floor(Math.random() * personName.length)
        span.innerHTML = personName[random]
      }, 100)
    })
    // 停止
    stop.addEventListener('click', function () {
      // 点击"停止",清除定时器,"开始"按钮ture
      clearInterval(timer)
      start.disabled = false
      stop.disabled = true
    })
  </script>
</body>

</html>