通过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>
效果图展示:
