脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS随机抽取员工

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

 更新时间：2023年11月03日 08:14:53   作者：qwerrt9  
这篇文章主要为大家详细介绍了基于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>

效果图展示

到此这篇关于基于JS实现简单的随机抽取幸运员工系统的文章就介绍到这了,更多相关JS随机抽取员工内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论