使用javascript做的一个随机点名程序

下面是使用JavaScript做随机点名程序的完整攻略。

一、前期准备

在开始编写随机点名程序之前，需要确定以下问题：

1. 需要点名的人员名单存储在什么地方？
2. 点名程序的界面如何设计？
3. 点击“点名”按钮后，程序如何读取名单并实现随机选择？
4. 随机选择后，如何将选中的人员信息展示在界面上？

在回答这些问题之后，就可以开始编写代码了。

二、程序实现

1. 存储名单

我们可以将名单存储在一个数组中。数组中的每个元素代表一位人员，可以包含其姓名、学号、手机号等信息。

var students = [
  { name: '张三', number: '1001', phone: '13888888888' },
  { name: '李四', number: '1002', phone: '13999999999' },
  { name: '王五', number: '1003', phone: '13666666666' },
  // ...
];

2. 界面设计

随机点名程序的界面可以简单设计为一个按钮和一个文本框。按钮用于触发“点名”事件，文本框用于显示点名结果。

<button id="btn">点名</button>
<input id="result" type="text" readonly>

3. 读取名单及随机选择

当用户点击“点名”按钮时，程序需要读取名单并随机选择一位人员。具体实现如下：

var btn = document.getElementById('btn'); // 获取按钮
var result = document.getElementById('result'); // 获取文本框
btn.onclick = function () { // 给按钮绑定点击事件
  var index = Math.floor(Math.random() * students.length); // 随机选择一位人员
  var student = students[index]; // 获取所选人员信息
  result.value = student.name + '，' + student.number; // 将结果显示在文本框中
};

4. 示例说明

假设有一个班级，名单存放在一个JSON文件中，如下所示：

[
  {"name": "张三", "number": "1001", "phone": "13888888888"},
  {"name": "李四", "number": "1002", "phone": "13999999999"},
  {"name": "王五", "number": "1003", "phone": "13666666666"}
]

我们可以使用fetch API从JSON文件中读取名单，并随机选择一位人员。实现代码如下：

fetch('students.json') // 获取名单文件
  .then(response => response.json()) // 将JSON格式的数据转换为JavaScript对象
  .then(students => { // 成功获取名单后执行以下代码
    var btn = document.getElementById('btn'); // 获取按钮
    var result = document.getElementById('result'); // 获取文本框
    btn.onclick = function () { // 给按钮绑定点击事件
      var index = Math.floor(Math.random() * students.length); // 随机选择一位人员
      var student = students[index]; // 获取所选人员信息
      result.value = student.name + '，' + student.number; // 将结果显示在文本框中
    };
  })
  .catch(error => { // 获取名单失败后执行以下代码
    console.error(error);
  });

这个程序会从指定的JSON文件中读取名单，当用户点击“点名”按钮时，会随机选择一位人员，并将其姓名和学号显示在文本框中。用户可以反复点击“点名”按钮来随机选择不同的人员。