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

时间：2025-03-29 12:21:57
<!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="开始点名"  />
    </div>

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

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

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

相关文章