javascript实现点名器功能

最新推荐文章于 2024-01-09 11:47:36 发布

VUE.JS

最新推荐文章于 2024-01-09 11:47:36 发布

阅读量356

点赞数

本文链接：https://blog.csdn.net/qq_45723045/article/details/103518644

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      div {
        width: 200px;
        height: 50px;
        font-size: 18px;
        line-height: 50px;
        text-align: center;
        font-weight: 900;
        border: 2px solid black;
        border-radius: 10px;
        margin-bottom: 20px;
      }
    </style>
  </head>
  <body>
    <div>开始点名</div>
    <button>停止点名</button>

    <script>
      var cname = [
        "周星驰",
        "张国荣",
        "梅艳芳",
        "吴彦祖",
        "霍建华",
        "刘德华",
        "黄家驹",
        "王力宏",
        "邓紫棋"
      ];

      var div = document.getElementsByTagName("div")[0];
      var btn = document.getElementsByTagName("button")[0];

      var timer;
      var flag = true;
      // 1:点击开始点名， div 随机出现一个人名、
      div.onclick = function() {
        if (flag) {
          flag = false;
          //  timer 作用：setInterval 执行次数的识别数；1 2 3 ... 表示执行吃书
          timer = setInterval(function() {
            //  name 是关键字 ； 遍历 Cname 数组
            cname.forEach(function(item, index) {
              //  item 数组元素；index数组索引值
              //  每次循环都生成一个随机数据。
              var random = Math.round(Math.random() * (cname.length - 1));
              // 获取随机名字
              a = cname[random];
              // 显示随机名字
              div.innerHTML = a;
            });
          }, 20);
        }

        console.log(timer);
      };
      btn.onclick = function() {
        //  停止计计时器
        clearInterval(timer);
        flag = true;
      };
    </script>
  </body>
</html>