html随机点名怎么制作源代码

想要制作一个HTML随机点名功能，其实并不复杂，本文将详细介绍如何通过HTML、CSS和JavaScript实现这一功能，以下是具体步骤和源代码，跟着我一步步来，你也能轻松制作出一个属于自己的随机点名器。

我们需要创建一个HTML文件，并在其中添加基本的结构，这里包括一个显示姓名的容器和一个用于触发热点名操作的按钮。

Markup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机点名</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="name-container"></div>
    <button id="roll-call">开始点名</button>
    <script src="script.js"></script>
</body>
</html>

我们来编写CSS样式，使页面看起来更美观，创建一个style.css文件，并添加以下内容：

CSS

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}
#name-container {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 20px;
}
button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

我们来编写核心的JavaScript代码，创建一个script.js文件，并添加以下内容：

JavaScript

// 假设这是班级名单
const names = ['张三', '李四', '王五', '赵六', '孙七'];
// 获取页面元素
const nameContainer = document.getElementById('name-container');
const rollCallButton = document.getElementById('roll-call');
// 定义点名函数
function rollCall() {
    // 生成一个随机索引
    const randomIndex = Math.floor(Math.random() * names.length);
    // 显示随机选中的姓名
    nameContainer.textContent = names[randomIndex];
}
// 给按钮添加点击事件
rollCallButton.addEventListener('click', rollCall);