抽签html
一个简单的 抽签活动网页，可以用于课堂、公司活动或聚会中进行随机抽取，具备如下主要功能：
功能介绍
1. 抽签功能
按下“开始”按钮，随机从姓名列表中滚动展示名字。按下“停止”按钮，锁定当前显示的名字，作为被抽取者，并从名单中移除，避免重复抽取。
2. 实时时间显示
页面实时显示当前时间，自动刷新，便于了解抽签的时间点。
3. 小标题自定义
输入小标题后，可以动态更新页面标题，满足不同活动场景需求。
4. 抽取结果记录
抽取的名字会依次记录在结果框中，方便查看抽取的完整名单。
5. 初始化功能
提供“初始化”按钮，重置抽签名单和界面，支持重新开始抽签活动。
界面设计
响应式布局：设计布局采用 flex 布局，使页面在不同屏幕上都能保持良好的显示效果。动态展示区域：
抽签显示区域：实时滚动姓名，采用视觉突出的设计（如颜色和字体大小）。时间显示区域：格式化当前日期时间，提供时刻更新。抽取结果框：滚动展示已抽取的姓名。 按钮交互设计：
开始、停止、初始化按钮根据当前操作状态动态启用或禁用，避免误操作。
核心代码解读
1. 姓名列表和随机抽取
let names = ["张三", "李四", "王五", ...]; // 姓名列表
let interval;
let currentNameIndex = 0;
function startDraw() {
interval = setInterval(() => {
currentNameIndex = Math.floor(Math.random() * names.length);
document.getElementById("nameDisplay").innerText = names[currentNameIndex];
}, 100);
}
function stopDraw() {
clearInterval(interval);
let selectedName = names[currentNameIndex];
document.getElementById("resultDisplay").innerHTML += selectedName + " ";
names.splice(currentNameIndex, 1); // 移除已抽中者
}
setInterval：以 100 毫秒为间隔随机切换展示名字，模拟滚动效果。Math.random()：生成 0 至列表长度之间的随机索引，实现随机抽取。splice：将抽取的名字从列表中移除，防止重复。
2. 实时时间显示
function showCurrentTime() {
let now = new Date();
let formattedTime = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
document.getElementById('currentTimeDisplay').innerText = `当前时间：${formattedTime}`;
}
setInterval(showCurrentTime, 1000); // 每秒刷新时间
使用 setInterval 定时刷新时间。日期与时间格式化时，padStart 补全个位数字的前导零，保证美观一致。
3. 初始化功能
function initialize() {
clearInterval(interval);
document.getElementById("nameDisplay").innerText = "准备抽签...";
document.getElementById("resultDisplay").innerHTML = "抽取结果：";
names = [...originalNames]; // 还原原始名单
}
恢复原始名单，清空结果显示区域，实现重置。
4. 动态标题更新
function updateSubtitle() {
let subtitle = document.getElementById("subtitleInput").value;
document.title = subtitle ? `抽签活动 - ${subtitle}` : '抽签活动';
}
通过 input 元素的 oninput 事件，实时更新页面标题，使其动态适应活动主题。
测试指南
页面加载
打开网页后，页面应显示默认提示“准备抽签…”和当前时间。 抽签功能
点击“开始”按钮，nameDisplay 区域快速滚动随机姓名。点击“停止”按钮，锁定姓名，同时更新结果框。 动态标题
在小标题输入框中输入文字，页面标题应即时更新。 初始化功能
点击“初始化”按钮，应清空结果框、恢复所有名单。 名单消耗
抽取到最后一名时，提示名单已空。
应用场景
课堂抽答：随机点名回答问题。活动抽奖：抽取获奖者名单。公司抽签：分配任务或团队成员。
源码获取