通过HTML和JavaScript实现随机抽取幸运员工

需求描述: 公司经常会要求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>

效果图展示: