通过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>

效果图展示: