腾讯云AI代码助手编程挑战赛-随机点名器

点名器应用是一个简单的网页工具，用于从一个包含多个名字的文本文件中随机挑选一个名字，并将其显示在网页上。用户可以通过上传一个文本文件，点击按钮来触发随机点名操作。

阿征学IT

448人浏览 · 2025-01-09 10:34:10

阿征学IT · 2025-01-09 10:34:10 发布

1. 概述

(作品示意图)

2. 功能

上传文件：用户上传一个包含名字的文本文件（如 .txt 文件），文件中的名字以空格或换行符分隔。

随机点名：点击“点名”按钮时，系统会从文件中的名字列表中随机选择一个名字并显示。

名字展示：随机选择的名字将在页面上以动画效果显示。

3. 技术栈

HTML：构建页面结构。

CSS：页面样式和动画效果。

JavaScript：处理文件上传、数据解析和随机点名的逻辑。

4. HTML 结构

以下是页面的基本结构和主要元素：

<div class="container">
  <input type="file" id="fileInput" accept=".txt" />
  <button id="callNameButton">点名</button>
</div>

div.container：包含上传文件控件和按钮的容器。

input[type="file"]：用于上传文件，接受 .txt 格式的文件。

button#callNameButton：点击按钮触发点名功能。

5. CSS 样式

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #eef2f3;
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  margin: 0;
}

.container {
  background-color: #ffffff;
  padding: 30px 40px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
  position: relative;
}

body：设置页面的整体布局，使用 flex 布局让容器居中显示。

container：为上传文件区域和按钮提供一个背景色、内边距、圆角边框及阴影效果，使界面看起来更加简洁且现代。

input[type="file"] {
  margin-bottom: 20px;
  padding: 10px;
  border: 2px dashed #ccc;
  border-radius: 5px;
  cursor: pointer;
  transition: border-color 0.3s;
}
input[type="file"]:hover {
  border-color: #007BFF;
}

input[type="file"]：设置上传文件控件的样式，使其具有虚线边框，鼠标悬停时改变边框颜色。

button {
  padding: 10px 20px;
  background-color: #007BFF;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}
button:hover {
  background-color: #0056b3;
}

button：为点名按钮设置背景色、文字颜色、圆角、内边距，并提供鼠标悬停时的颜色过渡效果。

.name-display {
  margin-top: 20px;
  font-size: 2em;
  color: #333;
  opacity: 0;
  transform: scale(0);
  animation: fadeInScale 1s forwards;
}
@keyframes fadeInScale {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

name-display：设置名字显示区域的样式，使用 keyframes 实现名字显示时的动画效果（淡入并放大）。

6. JavaScript 逻辑

JavaScript 部分实现了文件读取、数据解析、随机选择名字以及名字展示的核心功能。

document.addEventListener('DOMContentLoaded', function() {
  var names = [];
  var nameDisplay; // 用于存储当前显示的名字元素

names：用于存储从文件中读取的名字列表。

nameDisplay：用于保存当前显示的名字元素，以便在显示新名字时进行替换。

function handleFileSelect(event) {
  var file = event.target.files[0];
  if (!file) return;
  var reader = new FileReader();
  reader.onload = function(e) {
    names = e.target.result.trim().split(/\s+/);
  };
  reader.readAsText(file);
}

handleFileSelect：处理文件选择的事件，利用 FileReader API 读取上传的文本文件。当文件读取完成时，将其内容按空格或换行符分割成名字数组，保存在 names 数组中。

function callRandomName() {
  if (names.length === 0) {
    alert('名字列表为空，请先选择一个包含名字的文本文件！');
    return;
  }
  var randomIndex = Math.floor(Math.random() * names.length);
  var randomName = names[randomIndex];
  showName(randomName);
}

callRandomName：点击点名按钮时触发该函数。如果 names 数组为空（即未上传文件），弹出提示框。否则，随机选择一个名字并调用 showName 函数展示该名字。

function showName(name) {
  // 如果之前有名字显示元素，先移除它
  if (nameDisplay) {
    nameDisplay.remove();
  }

  // 创建新的名字显示元素
  nameDisplay = document.createElement('div');
  nameDisplay.className = 'name-display';
  nameDisplay.textContent = name;
  document.querySelector('.container').appendChild(nameDisplay);
}

showName：该函数用于在页面上显示随机选择的名字。首先移除之前显示的名字元素（如果有的话），然后创建一个新的 div 元素，设置其文本为随机选择的名字，最后将其添加到页面中。

document.getElementById('fileInput').addEventListener('change', handleFileSelect);
document.getElementById('callNameButton').addEventListener('click', callRandomName);