js随机点名点击开始点击停止

以下是一个简单的实现：

HTML：

<button id="startBtn">开始点名</button>
<button id="stopBtn" disabled>停止点名</button>
<div id="nameDisplay"></div>

JS：

const names = ['张三', '李四', '王五', '赵六', '钱七']; // 姓名列表
let intervalId; // 定时器 ID

const startBtn = document.getElementById('startBtn');
const stopBtn = document.getElementById('stopBtn');
const nameDisplay = document.getElementById('nameDisplay');

startBtn.addEventListener('click', startRandomName);
stopBtn.addEventListener('click', stopRandomName);

function startRandomName() {
  intervalId = setInterval(() => {
    const randomIndex = Math.floor(Math.random() * names.length);
    const randomName = names[randomIndex];
    nameDisplay.innerText = randomName;
  }, 100); // 每 100 毫秒更新一次姓名显示

  startBtn.disabled = true;
  stopBtn.disabled = false;
}

function stopRandomName() {
  clearInterval(intervalId);

  startBtn.disabled = false;
  stopBtn.disabled = true;
}

代码说明：

定义一个姓名列表 names，以及一个用于存储定时器 ID 的变量 intervalId。
获取 HTML 中的开始按钮、停止按钮和姓名显示区域的 DOM 元素，并分别存储到变量中。
给开始按钮和停止按钮分别添加点击事件监听器，分别调用 startRandomName() 和 stopRandomName() 函数。
startRandomName() 函数启动一个定时器，每隔 100 毫秒更新一次姓名显示区域的文本内容。更新的内容为随机选择一个姓名列表中的姓名。
startRandomName() 函数还禁用开始按钮，启用停止按钮。
stopRandomName() 函数清除之前启动的定时器。
stopRandomName() 函数还启用开始按钮，禁用停止按钮。

你可以在此基础上进行修改和扩展，比如增加更多的姓名、修改定时器间隔时间、增加样式等等。