随机点名随机点名

最新推荐文章于 2024-04-22 23:06:24 发布

富江¢

最新推荐文章于 2024-04-22 23:06:24 发布

阅读量116

点赞数

CC 4.0 BY-SA版权

文章标签： html

本文链接：https://blog.youkuaiyun.com/qq_58235030/article/details/124393629

这是一个简单的HTML页面实现的随机点名系统。页面包含一个点击按钮，当点击后会从预定义的学生名单中随机选取一名学生，并将名字显示在页面上。同时，被点名的学生将从名单中移除，直到名单为空时，点名按钮将被禁用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
      .form{
        width: 150px;
        height: 150px;
        margin: 0 auto;
        border: 1px solid black;
      }
      .text{
        width: 150px;
        height: 120px;
        background-color: #f6e6ec;
        font-size: 25px;
        line-height: 120px;
        text-align: center;
      }
      button{
        width: 150px;
        height: 30px;
      }

  </style>
</head>
<body>

  <div class="form">
    <div class="text">
        点击按钮点名
    </div>
    <button>随机点名</button>
  </div>


<script>
  var stus = [];
  var count = 10;
  for(var i = 0; i < count; i++){
    stus[i] = "学生" + (i + 1);
  }
  document.querySelector("button").onclick = function (){

    var random = parseInt(Math.random() * count);

    document.querySelector(".text").innerText = stus[random];

    stus.splice(random,1);

    count--;

    if (count == 0){
      this.disabled = true;
    }
  }

</script>
</body>
</html>

在这里插入图片描述