JS随机点名|极客笔记

JS随机点名

在教育和培训领域，老师或教练经常需要随机点名来激励学生积极参与课堂活动。利用JavaScript编写一个随机点名工具可以轻松实现这一功能。本文将详细介绍如何使用JS编写一个随机点名工具，并展示运行效果。

实现思路

随机点名工具的实现思路很简单，主要包括以下几个步骤：

创建一个包含学生名字的数组；
通过随机数从数组中随机选取一个学生；
将选中的学生显示在页面上。

HTML结构

首先，我们需要在HTML中创建一个按钮和一个用于显示点名结果的div：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>随机点名</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>随机点名工具</h1>
  <button id="randomBtn">随机点名</button>
  <div id="result"></div>
  <script src="app.js"></script>
</body>
</html>

JavaScript代码

接下来，我们需要编写JS代码来实现随机点名的功能。首先，我们需要在app.js文件中创建一个包含学生名字的数组，并为按钮绑定点击事件：

const students = ['小明', '小红', '小绿', '小蓝', '小黄', '小紫'];

const btn = document.getElementById('randomBtn');
const resultDiv = document.getElementById('result');

btn.addEventListener('click', () => {
  const randomIndex = Math.floor(Math.random() * students.length);
  const randomStudent = students[randomIndex];

  resultDiv.innerText = `点名结果：${randomStudent}`;
});

在上面的代码中，我们首先定义了一个包含学生名字的数组students，然后获取按钮和显示结果的div元素。接着，我们给按钮绑定了一个点击事件，当点击按钮时，会从students数组中随机选取一个学生，并显示在页面上。

CSS样式

最后，我们可以在styles.css文件中添加一些样式来美化页面：

body {
  font-family: Arial, sans-serif;
  text-align: center;
}

h1 {
  color: #333;
}

button {
  padding: 10px 20px;
  margin-top: 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

#result {
  margin-top: 20px;
  font-size: 20px;
}