快捷導(dǎo)航

基于JS實(shí)現(xiàn)簡單的隨機(jī)抽取幸運(yùn)員工系統(tǒng)

更新時(shí)間：2023年11月03日 08:14:53 作者：qwerrt9

這篇文章主要為大家詳細(xì)介紹了基于HTML+JavaScript實(shí)現(xiàn)簡單的隨機(jī)抽取幸運(yùn)員工系統(tǒng),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起了解一下

HTML 結(jié)構(gòu)

首先，我們需要編寫 HTML 代碼來定義頁面結(jié)構(gòu)和元素。下面是 HTML 代碼的結(jié)構(gò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 樣式，用于頁面布局和樣式 */
        /* ... */
    </style>
</head>
<body>
    <div class="container">
        <!-- 頁面內(nèi)容部分 -->
        <h1>2023年度公司幸運(yùn)員工</h1>
        <p>今天的幸運(yùn)員工是：</p>
        <div id="selectedEmployees" class="highlighted"></div>
        <button onclick="startRandomSelection()">開始隨機(jī)選擇</button>
        <button onclick="stopRandomSelection()">停止選擇</button>
    </div>

    <script>
        // JavaScript 代碼部分
        /* ... */
    </script>
</body>
</html>

這里我們使用了 <div> 元素作為容器，然后在其中放置了標(biāo)題、段落、被選中的員工名單和兩個(gè)按鈕元素。需要注意的是，我們在 <div> 元素中使用了 class 屬性來定義樣式，而在被選中的員工名單 <div> 元素中使用了 id 屬性，在 JavaScript 代碼中通過該 ID 來修改其內(nèi)容。

CSS 樣式

接下來，我們需要編寫 CSS 樣式代碼，用于頁面布局和樣式設(shè)置。這里我們采用了一些簡單的樣式，如顏色漸變背景、字體和按鈕樣式等。下面是 CSS 樣式代碼的結(jié)構(gòu)：

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 的樣式，使其占據(jù)整個(gè)屏幕，并使用背景漸變色。然后，我們定義了容器、標(biāo)題、段落、被選中的員工名單、按鈕等元素的樣式，并設(shè)置了一些基本的布局和樣式屬性，如字體、顏色、間距、邊框和圓角等。

JavaScript 代碼

最后，我們需要編寫 JavaScript 代碼，用于實(shí)現(xiàn)隨機(jī)選擇員工的功能。下面是 JavaScript 代碼的結(jié)構(gòu)：

var employee_list = [
    "員工1", "員工2", "員工3", "員工4", "員工5", 
    // ...
    "員工96", "員工97", "員工98", "員工99", "員工100"
];

var selectedEmployees = []; // 用于存儲(chǔ)隨機(jī)選擇的員工
var intervalId; // 用于存儲(chǔ) setInterval 的 ID
var isRandomSelecting = false; // 標(biāo)志是否正在隨機(jī)選擇

// 隨機(jī)選擇員工的函數(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(", ");
}

// 開始隨機(jī)選擇員工
function startRandomSelection() {
    if (!isRandomSelecting) {
        intervalId = setInterval(selectEmployeesRandomly, 100);
        isRandomSelecting = true;
    }
}

// 停止隨機(jī)選擇員工
function stopRandomSelection() {
    clearInterval(intervalId);
    isRandomSelecting = false;
}

// 頁面加載時(shí)自動(dòng)開始隨機(jī)選擇員工
window.onload = function() {
    startRandomSelection();
}

在這里，我們首先定義了一個(gè)員工列表 employee_list，其中包含所有可選的員工名單。然后，我們定義了三個(gè)變量：selectedEmployees 用于存儲(chǔ)隨機(jī)選擇的員工名單，intervalId 用于存儲(chǔ) setInterval 函數(shù)的 ID，isRandomSelecting 用于標(biāo)志是否正在隨機(jī)選擇中。

接下來，我們定義了一個(gè) selectEmployeesRandomly 函數(shù)，用于隨機(jī)選擇員工。該函數(shù)會(huì)首先清空已選中員工名單，并進(jìn)行循環(huán)，每次從所有員工名單中隨機(jī)選擇一個(gè)員工，并判斷該員工是否已被選中。如果未被選中，則將其添加到已選中員工名單中，直至已選中員工數(shù)達(dá)到 5 人。最后，我們通過 document.getElementById("selectedEmployees").textContent 來修改 HTML 中被選中員工名單的內(nèi)容。

然后，我們定義了兩個(gè)函數(shù) startRandomSelection 和 stopRandomSelection，用于實(shí)現(xiàn)開始和停止隨機(jī)選擇的功能。這里我們使用了 setInterval 函數(shù)來實(shí)現(xiàn)每隔 100 毫秒執(zhí)行一次 selectEmployeesRandomly 函數(shù)，從而實(shí)現(xiàn)隨機(jī)選擇的效果。

最后，我們在頁面加載完成時(shí)自動(dòng)調(diào)用 startRandomSelection 函數(shù)，開始隨機(jī)選擇員工。

總結(jié)

通過上述 HTML、CSS 和 JavaScript 代碼的編寫，我們實(shí)現(xiàn)了一個(gè)簡單的隨機(jī)選擇員工程序。這個(gè)程序可以用于例如公司年會(huì)等場合，讓大家感到更有趣，更具互動(dòng)性。當(dāng)然，如果需要更精細(xì)的程序，還需要進(jìn)一步的優(yōu)化和改進(jìn)。

完整代碼

<!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; /* 標(biāo)題字體大小 */
            margin-bottom: 100px; /* 標(biāo)題底部間距 */
        }
        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">
        <!-- 頁面內(nèi)容部分 -->
        <h1>2023年度公司幸運(yùn)員工</h1>
        <p>今天的幸運(yùn)員工是：</p>
        <div id="selectedEmployees" class="highlighted"></div>
        <button onclick="startRandomSelection()">開始隨機(jī)選擇</button>
        <button onclick="stopRandomSelection()">停止選擇</button>
    </div>

    <script>
        // JavaScript 代碼部分
        var employee_list = [
            "員工1", "員工2", "員工3", "員工4", "員工5", 
            // ...
            "員工96", "員工97", "員工98", "員工99", "員工100"
        ];

        var selectedEmployees = []; // 用于存儲(chǔ)隨機(jī)選擇的員工
        var intervalId; // 用于存儲(chǔ) setInterval 的 ID
        var isRandomSelecting = false; // 標(biāo)志是否正在隨機(jī)選擇

        // 隨機(jī)選擇員工的函數(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(", ");
        }

        // 開始隨機(jī)選擇員工
        function startRandomSelection() {
            if (!isRandomSelecting) {
                intervalId = setInterval(selectEmployeesRandomly, 100); // 每 100 毫秒選擇一次
                isRandomSelecting = true;
            }
        }

        // 停止隨機(jī)選擇員工
        function stopRandomSelection() {
            clearInterval(intervalId); // 清除 setInterval
            isRandomSelecting = false;
        }

        // 頁面加載時(shí)自動(dòng)開始隨機(jī)選擇員工
        window.onload = function() {
            startRandomSelection();
        }
    </script>
</body>
</html>