当前位置：首页 > 全部内容 > 正文

基于JS实现简单的随机抽取幸运员工系统

作者：木棉

时间：2026-10-31

浏览：581

本文介绍如何使用HTML、CSS和JavaScript构建一个简单的随机抽取幸运员工系统。通过定义员工列表、利用setInterval实现动态滚动效果，并控制选中逻辑，适用于公司年会等互动场景，提升活动趣味性。

文章目录

需求描述：企业常需IT部门开发随机抽选员工界面，本文借助HTML与JavaScript构建该功能。

HTML 结构

首要步骤是编写HTML代码以确立页面架构及组件。具体HTML结构如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>员工分享工作感悟</title>
    <style>
        /* CSS 样式，用于页面布局和样式 */
        /* ... */
    </style>
</head>
<body>
    <div class="container">
        <!-- 页面内容部分 -->
        <h1>2023年度公司幸运员工</h1>
        <p>今天的幸运员工是：</p>
        <div id="selectedEmployees" class="highlighted"></div>
        <button onclick="startRandomSelection()">开始随机选择</button>
        <button onclick="stopRandomSelection()">停止选择</button>
    </div>

    <script>
        // JavaScript 代码部分
        /* ... */
    </script>
</body>
</html>

此处采用 <div> 标签作为主容器，内部包含标题、说明段落、已选员工列表及两个操作按钮。需留意，<div> 标签内通过 class 属性指定样式，而员工列表所在的 <div> 标签利用 id 属性标识，JavaScript据此ID更新内容。

CSS 样式

随后编写CSS样式代码，负责页面布局与视觉美化。此处应用了基础样式，包括背景渐变、字体设定及按钮样式等。CSS结构如下：

body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(to right, #f06, #9f6);
    font-family: Arial, sans-serif;
}
.container {
    text-align: center;
    color: #fff;
}
h1 {
    font-size: 100px;
    margin-bottom: 100px;
}
p {
    font-size: 40px;
    margin-bottom: 0px;
    line-height: 3;
}
.highlighted {
    font-size: 45px;
    font-weight: bold;
    margin-bottom: 80px;
    color: #FFD700;
}
button {
    background-color: #007BFF;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 50px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
button:hover {
    background-color: #0056b3;
}

此处设定了 body 样式，使其铺满屏幕并应用背景渐变色。接着定义了容器、标题、段落、员工列表及按钮等元素的样式，配置了字体、颜色、间距、边框及圆角等基本布局属性。

JavaScript 代码

最后编写JavaScript代码，以实现员工随机选取逻辑。JavaScript结构如下：

var employee_list = [
    "员工1", "员工2", "员工3", "员工4", "员工5", 
    // ...
    "员工96", "员工97", "员工98", "员工99", "员工100"
];

var selectedEmployees = []; // 用于存储随机选择的员工
var intervalId; // 用于存储 setInterval 的 ID
var isRandomSelecting = false; // 标志是否正在随机选择

// 随机选择员工的函数
function selectEmployeesRandomly() {
    selectedEmployees = [];
    while (selectedEmployees.length < 5) {
        var randomIndex = Math.floor(Math.random() * employee_list.length);
        var selectedEmployee = employee_list[randomIndex];
        if (!selectedEmployees.includes(selectedEmployee)) {
            selectedEmployees.push(selectedEmployee);
        }
    }
    document.getElementById("selectedEmployees").textContent = selectedEmployees.join(", ");
}

// 开始随机选择员工
function startRandomSelection() {
    if (!isRandomSelecting) {
        intervalId = setInterval(selectEmployeesRandomly, 100);
        isRandomSelecting = true;
    }
}

// 停止随机选择员工
function stopRandomSelection() {
    clearInterval(intervalId);
    isRandomSelecting = false;
}

// 页面加载时自动开始随机选择员工
window.onload = function() {
    startRandomSelection();
}

此处首先定义员工数组 employee_list，涵盖所有可选人员。接着定义三个变量：selectedEmployees 用于保存随机选出的员工，intervalId 用于保存 setInterval 函数的ID，isRandomSelecting 用于标记是否处于随机选择状态。

接着定义 selectEmployeesRandomly 函数，负责随机选取员工。该函数先清空已选列表，然后循环执行，每次从全员中随机抽取一人并检查是否已选中。若未选中，则加入列表，直到选中人数达到 5 人。最后通过 document.getElementById("selectedEmployees").textContent 更新HTML中员工列表的内容。

随后定义 startRandomSelection 与 stopRandomSelection 两个函数，分别实现开始与停止随机选取功能。此处利用 setInterval 函数每 100 毫秒执行一次 selectEmployeesRandomly 函数，从而达成随机滚动选取效果。

最后，在页面加载完成后自动调用 startRandomSelection 函数，启动随机选取流程。

总结

通过上述HTML、CSS及JavaScript代码的编写，我们构建了一个简易的随机选员程序。该程序适用于公司年会等场景，增加趣味性与互动性。若需更精细的功能，还需进一步优化与改进。

完整代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>员工分享工作感悟</title>
    <style>
        /* CSS 样式，用于页面布局和样式 */
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(to right, #f06, #9f6);
            font-family: Arial, sans-serif;
        }
        .container {
            text-align: center;
            color: #fff;
        }
        h1 {
            font-size: 100px; /* 标题字体大小 */
            margin-bottom: 100px; /* 标题底部间距 */
        }
        p {
            font-size: 40px; /* 段落字体大小 */
            margin-bottom: 0px; /* 段落底部间距 */
            line-height: 3; /* 行间距 */
        }
        .highlighted {
            font-size: 45px; /* 突出文字字体大小 */
            font-weight: bold;
            margin-bottom: 80px;
            color: #FFD700; /* 黄色 */
        }
        button {
            background-color: #007BFF;
            color: #fff;
            border: none;
            padding: 10px 20px;
            font-size: 50px; /* 按钮字体大小 */
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 页面内容部分 -->
        <h1>2023年度公司幸运员工</h1>
        <p>今天的幸运员工是：</p>
        <div id="selectedEmployees" class="highlighted"></div>
        <button onclick="startRandomSelection()">开始随机选择</button>
        <button onclick="stopRandomSelection()">停止选择</button>
    </div>

    <script>
        // JavaScript 代码部分
        var employee_list = [
            "员工1", "员工2", "员工3", "员工4", "员工5", 
            // ...
            "员工96", "员工97", "员工98", "员工99", "员工100"
        ];

        var selectedEmployees = []; // 用于存储随机选择的员工
        var intervalId; // 用于存储 setInterval 的 ID
        var isRandomSelecting = false; // 标志是否正在随机选择

        // 随机选择员工的函数
        function selectEmployeesRandomly() {
            selectedEmployees = [];
            while (selectedEmployees.length < 5) {
                var randomIndex = Math.floor(Math.random() * employee_list.length);
                var selectedEmployee = employee_list[randomIndex];
                if (!selectedEmployees.includes(selectedEmployee)) {
                    selectedEmployees.push(selectedEmployee);
                }
            }
            document.getElementById("selectedEmployees").textContent = selectedEmployees.join(", ");
        }

        // 开始随机选择员工
        function startRandomSelection() {
            if (!isRandomSelecting) {
                intervalId = setInterval(selectEmployeesRandomly, 100); // 每 100 毫秒选择一次
                isRandomSelecting = true;
            }
        }

        // 停止随机选择员工
        function stopRandomSelection() {
            clearInterval(intervalId); // 清除 setInterval
            isRandomSelecting = false;
        }

        // 页面加载时自动开始随机选择员工
        window.onload = function() {
            startRandomSelection();
        }
    </script>
</body>
</html>

效果图展示

HTML 结构

至此，关于基于JS实现简单的随机抽取幸运员工系统的介绍结束。如需了解更多JS随机抽取员工相关内容，请查阅本站往期文章或继续浏览下方相关文章，希望大家日后多多支持本站！

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印，自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式，预览压缩前后的大小。

使用 ›
作者最新文章

JS运算符优先级与结合性的区别是什么？

JS Map怎么只遍历Key或Value

D3.js 与 ECharts 选型对比：灵活性 vs 开发效率

为什么JS中typeof []返回object：数组类型检测误区解析

D3.js 新手入门：环境搭建与第一个条形图实现

相关文章
热门文章
更多
CSS text-transform与JS修改首字母大写的适用场景区别
JS中constructor属性判断数组存在哪些风险
JS正则替换中$1捕获组引用与字符串重组技巧
全栈开发中JavaScript与Java怎么协作？前后端技术栈配合解析
Node.js后端生成高强度随机字符串的方法
怎么在本地运行JavaScript脚本：Node.js下载安装与环境配置教程
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
JS 解压出现乱码或报错怎么解决？
JavaScript常见SyntaxError语法错误排查与修复方法
JS动态构建复杂嵌套JSON对象的方法