js里点名器怎么做

在JavaScript中创建一个点名器可以通过使用数组、随机数生成和DOM操作来实现。你可以使用数组来存储所有的名字，然后通过生成一个随机数来选择一个名字，并在网页上显示出来。我们将详细描述如何实现这个点名器，并提供具体的代码示例。

一、准备工作

在开始编写代码之前，你需要准备一个HTML页面和一个JavaScript文件。在HTML页面中，你需要创建一些基本的HTML元素，如输入框、按钮和用于显示结果的区域。

HTML页面结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点名器</title>
</head>
<body>
    <h1>点名器</h1>
    <input type="text" id="nameInput" placeholder="输入名字">
    <button id="addNameButton">添加名字</button>
    <button id="pickNameButton">点名</button>
    <div id="nameList"></div>
    <h2>被选中的人是：</h2>
    <div id="selectedName"></div>
    <script src="script.js"></script>
</body>
</html>

二、实现核心功能

在这个部分，我们将编写JavaScript代码来实现点名器的核心功能。

1、初始化数据

我们需要一个数组来存储所有输入的名字，并且需要获取HTML元素，以便在操作时更新界面。

// script.js
let names = [];
const nameInput = document.getElementById('nameInput');
const addNameButton = document.getElementById('addNameButton');
const pickNameButton = document.getElementById('pickNameButton');
const nameList = document.getElementById('nameList');
const selectedName = document.getElementById('selectedName');

2、添加名字功能

我们需要编写一个函数，当用户点击“添加名字”按钮时，该函数会将输入框中的名字添加到数组中，并更新名字列表。

addNameButton.addEventListener('click', () => {
    const name = nameInput.value.trim();
    if (name) {
        names.push(name);
        updateNameList();
        nameInput.value = '';
    }
});
function updateNameList() {
    nameList.innerHTML = names.map(name => `<p>${name}</p>`).join('');
}

3、点名功能

我们需要编写一个函数，当用户点击“点名”按钮时，该函数会从数组中随机选择一个名字，并显示在页面上。

pickNameButton.addEventListener('click', () => {
    if (names.length > 0) {
        const randomIndex = Math.floor(Math.random() * names.length);
        const name = names[randomIndex];
        selectedName.textContent = name;
    } else {
        selectedName.textContent = '请先添加名字';
    }
});

三、优化和增强功能

1、移除名字功能

为了让点名器更加实用，我们可以添加一个功能，当一个名字被选中后，将其从数组中移除。

pickNameButton.addEventListener('click', () => {
    if (names.length > 0) {
        const randomIndex = Math.floor(Math.random() * names.length);
        const name = names[randomIndex];
        selectedName.textContent = name;
        names.splice(randomIndex, 1);
        updateNameList();
    } else {
        selectedName.textContent = '请先添加名字';
    }
});

2、保存和加载名字列表

为了保持用户体验，我们可以使用浏览器的localStorage来保存和加载名字列表。

document.addEventListener('DOMContentLoaded', () => {
    const savedNames = localStorage.getItem('names');
    if (savedNames) {
        names = JSON.parse(savedNames);
        updateNameList();
    }
});
addNameButton.addEventListener('click', () => {
    const name = nameInput.value.trim();
    if (name) {
        names.push(name);
        updateNameList();
        nameInput.value = '';
        localStorage.setItem('names', JSON.stringify(names));
    }
});
pickNameButton.addEventListener('click', () => {
    if (names.length > 0) {
        const randomIndex = Math.floor(Math.random() * names.length);
        const name = names[randomIndex];
        selectedName.textContent = name;
        names.splice(randomIndex, 1);
        updateNameList();
        localStorage.setItem('names', JSON.stringify(names));
    } else {
        selectedName.textContent = '请先添加名字';
    }
});

四、使用CSS美化

最后，为了让点名器更加美观，我们可以添加一些CSS样式。以下是一个简单的示例：

/* style.css */
body {
    font-family: Arial, sans-serif;
    text-align: center;
}
input, button {
    margin: 10px;
    padding: 10px;
}
#nameList {
    margin: 20px 0;
}
#selectedName {
    font-size: 24px;
    font-weight: bold;
    color: red;
}

将这个CSS文件链接到HTML页面中：

<head>
    <link rel="stylesheet" href="style.css">
</head>

通过以上步骤，我们已经创建了一个功能完备的点名器。这个点名器不仅可以添加和点名，还可以保存名字列表，并在页面加载时恢复。你可以根据需要进一步扩展和优化这个点名器。