js写一个简单的随机点名器

最新推荐文章于 2023-02-03 15:05:38 发布

ZXH0122

最新推荐文章于 2023-02-03 15:05:38 发布

阅读量7.1k

点赞数 5

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

本文链接：https://blog.csdn.net/ZXH0122/article/details/106894961

版权

前端同时被 2 个专栏收录

84 篇文章 3 订阅

订阅专栏

javascript

31 篇文章 0 订阅

订阅专栏

<!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>
      .bgbox {
        margin: 50px auto;
        width: 300px;
        height: 300px;
      }
      .box {
        line-height: 300px;
        background-color:#ccc;
        font-size: 30px;
        text-align: center;
      }
      input{
          margin:10px auto;
          width:300px;
          height:40px;
      }
    </style>
  </head>

  <body>
    <div class="bgbox">
      <div class="box">班级点名器</div>
      <input type="button" value="开始点名" id="btn" />
    </div>

    <script>
    //获取 
      var btn = document.getElementById("btn");
      var box = document.getElementsByClassName("box")[0];
      /* 点击按钮开启定时器，定时器中去随机抽取人名，
      把全班的人放在一个数组中，只要想办法获取随机的索引号就可以 */
      btn.onclick = function () {
        if (this.value === "开始点名") {
          function fn() {
            var arr = [
              "崔智辽","李军","贾新宇","颉旺飞","王佳慧",
              "李长青","李忠","樊媛媛","张浩阳","刘世豪",
              "支宙杰","王立元","梁金霞","赵晓慧","李重瑞",
              "封振东","高志超","魏振国","常志强","王凯",
              "张栋","张潇","王悦琳","申梦宇","宣凯","李璟鑫"
            ];
            //随机获取      取整（0-1随机数 * 数组长度）    
            var index = parseInt(Math.random() * arr.length);
            // 组合颜色 n1+n2+n3
            var n1 = parseInt(Math.random() * 255 + 1);
            var n2 = parseInt(Math.random() * 255 + 1);
            var n3 = parseInt(Math.random() * 255 + 1);
            box.style.background = "rgb(" + n1 + "," + n2 + "," + n3 + ")";           
            box.innerHTML = arr[index];
          }

          this.value = "停止点名";
          //定时器不加var声明，涉及到作用域问题
          timer = setInterval(fn, 2);
        } else {
          clearInterval(timer);
          this.value = "开始点名";
        }
      };
    </script>
  </body>
</html>

这么简单的随机点名器你学会了吗？不懂的欢迎留言！

ZXH0122

关注

5
点赞
踩
14

收藏

觉得还不错? 一键收藏
2
评论
js写一个简单的随机点名器

<!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" /> <
复制链接

扫一扫

专栏目录