基于JS實現(xiàn)簡單的隨機抽取幸運員工系統(tǒng)
需求描述: 公司經常會要求IT部門做一個隨機抽取員工頁面，今天我們通過HTML和JavaScript來實現(xiàn)
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 代碼，用于實現(xiàn)隨機選擇員工的功能。下面是 JavaScript 代碼的結構：
var employee_list = [
"員工1", "員工2", "員工3", "員工4", "員工5",
// ...
"員工96", "員工97", "員工98", "員工99", "員工100"
];
var selectedEmployees = []; // 用于存儲隨機選擇的員工
var intervalId; // 用于存儲 setInterval 的 ID
var isRandomSelecting = false; // 標志是否正在隨機選擇
// 隨機選擇員工的函數(shù)
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 函數(shù)的 ID，isRandomSelecting 用于標志是否正在隨機選擇中。
接下來，我們定義了一個 selectEmployeesRandomly 函數(shù)，用于隨機選擇員工。該函數(shù)會首先清空已選中員工名單，并進行循環(huán)，每次從所有員工名單中隨機選擇一個員工，并判斷該員工是否已被選中。如果未被選中，則將其添加到已選中員工名單中，直至已選中員工數(shù)達到 5 人。最后，我們通過 document.getElementById("selectedEmployees").textContent 來修改 HTML 中被選中員工名單的內容。
然后，我們定義了兩個函數(shù) startRandomSelection 和 stopRandomSelection，用于實現(xiàn)開始和停止隨機選擇的功能。這里我們使用了 setInterval 函數(shù)來實現(xiàn)每隔 100 毫秒執(zhí)行一次 selectEmployeesRandomly 函數(shù)，從而實現(xiàn)隨機選擇的效果。
最后，我們在頁面加載完成時自動調用 startRandomSelection 函數(shù)，開始隨機選擇員工。
總結
通過上述 HTML、CSS 和 JavaScript 代碼的編寫，我們實現(xiàn)了一個簡單的隨機選擇員工程序。這個程序可以用于例如公司年會等場合，讓大家感到更有趣，更具互動性。當然，如果需要更精細的程序，還需要進一步的優(yōu)化和改進。
完整代碼
<!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; // 標志是否正在隨機選擇
// 隨機選擇員工的函數(shù)
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實現(xiàn)簡單的隨機抽取幸運員工系統(tǒng)的文章就介紹到這了,更多相關JS隨機抽取員工內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了前端如何對超大量數(shù)據進行渲染,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-12-12
下面小編就為大家?guī)硪黄獙son轉換成struts參數(shù)的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
javascript對數(shù)組的常用操作代碼 數(shù)組方法總匯
js下數(shù)組也是比較常用的，對數(shù)組元素的處理也是有非常多的方法，這里整理了下，需要的朋友可以參考下。2011-01-01
這篇文章主要介紹了uniapp 封裝組件的方法,結合實例形式分析了uniapp父級頁與子頁面組件封裝與傳參交互相關實現(xiàn)技巧,需要的朋友可以參考下2023-06-06
使用post方法實現(xiàn)json往返傳輸數(shù)據的方法
今天小編就為大家分享一篇關于使用post方法實現(xiàn)json往返傳輸數(shù)據的方法，小編覺得內容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-03-03
JavaScript事件循環(huán)及宏任務微任務原理解析
這篇文章主要介紹了JavaScript事件循環(huán)及宏任務微任務原理解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-09-09
forEach專門用來循環(huán)數(shù)組,可以直接取到元素,同時也可以取到index值,終止forEach存在局限性,不能continue跳過或者break終止循環(huán),所以本文給大家詳細介紹了在JS中如何終止foreach循環(huán),需要的朋友可以參考下2024-01-01
JavaScript實現(xiàn)的字符串replaceAll函數(shù)代碼分享
這篇文章主要介紹了JavaScript實現(xiàn)的字符串replaceAll函數(shù)代碼分享,本文直接給出實現(xiàn)代碼,需要的朋友可以參考下2015-04-04
今天小編就為大家分享一篇layui操作列按鈕個數(shù)和文字顏色的判斷實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
本文給大家介紹的是不使用構造函數(shù)實現(xiàn)"繼承"，非常的簡單，小伙伴們仔細了解下就可以非常熟悉了。2015-04-04