随机点名升级版

//注释比较明确
1.界面可视化
2.点击按钮可以实现开始或者停止功能
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>random,随机点名</title>
</head>

<body>
  <div>
    <h2 id="text">11</h2>
  </div>
  <button id="startBtn">开始</button>
  <button id="endBtn">结束</button>
  <script>
    function getRandom(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min //得到2个数之间的随机数，且此代码包含这2个数
    }

    // // 随机点名
    // var arr = ['张珊', '李四', '王二', '兰兰', '老张', '冬瓜', '闰土']
    // console.log(arr[getRandom(0, arr.length - 1)]);

    /*
        1.创建一个获取随机数的函数，此函数会获取一个数字，用来作为名称数组得下标
          1_1.具体实现方法：
              function getRandom(min, max) { //两个参数表示要随机的最小下标和最大下标范围
                return Math.floor(Math.random() * (max - min + 1)) + min //得到2个数之间的随机数，且此代码包含这2个数
              }
        2.将获取到的随机数作为数据下标来获取数组中对应的值
    */




    // 现在通过点击按钮随机选择姓名，点击停止按钮选出姓名
    /*
    1.给开始按钮绑定一个点击事件
    2.在事件里面添加定时器，在定时器里面写入生成随机点名的代码
    3.给结束按钮绑定一个结束事件
    4.在结束事件清除定时器
    */

    var sBtn = document.getElementById('startBtn')//通过开始按钮的id获取这个元素
    var eBtn = document.getElementById('endBtn')//获取结束按钮的元素
    var text = document.getElementById('text')//获取这个元素
    var arr = ['张珊', '李四', '王二', '兰兰', '老张', '冬瓜', '闰土']//举例进行验证
    sBtn.addEventListener("click", sBtnFun)//给开始按钮添加click点击事件
    var uName = ""//先定义一个变量
    function sBtnFun() {//生成随机数的名字
      if (uName != "") {
        clearInterval(uName)
      }
      uName = setInterval(function () {//给变量进行赋值，因为设及到作用域，里面的这种赋值相当于给全局作用域，以便清除定时器的时候可以使用
        text.innerHTML = arr[getRandom(0, arr.length - 1)]
      }, 200)
    }

    eBtn.addEventListener("click", eBtnFun)//给结束按钮绑定点击事件
    function eBtnFun() {
      if (uName == "") {//做个判断，如果uName为空，程序停止执行
        return
      }
      clearInterval(uName)


    }

  </script>
</body>

</html>
猜你喜欢
