极简主义爱好者必看：轻松制作活动抽签HTML页面，附详细教程与源码！

本文链接：https://blog.csdn.net/weixin_45408984/article/details/144667812

抽签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}` : '抽签活动';
}