JavaScript實現隨機點名的示例代碼

更新時間：2023年11月27日 08:27:29 作者：Tsugumi

這篇文章主要為大家詳細介紹了如何使用JavaScript實現隨機點名效果,文中的示例代碼簡潔易懂,具有一定的借鑒價值,感興趣的小伙伴可以跟隨小編一起學習一下

需求

分為上下兩個部分，上方為顯示區(qū)域，下方為控制區(qū)域。顯示區(qū)域顯示基地所有成員的工號和姓名，控制區(qū)域由開始和結束兩個按鈕組成。點擊開始按鈕，顯示區(qū)域里的內容開始滾動，點擊結束按鈕，內容滾動停止，隨機顯示一位成員的工號和姓名

演示圖

思路

HTML結構：

包含一個用于顯示的區(qū)域 displayArea 和一個控制區(qū)域 controlArea，控制區(qū)域包括開始和結束兩個按鈕。

CSS樣式：

設置基本樣式，包括字體、文本大小、邊距等。
displayArea 使用 overflow: hidden 隱藏溢出的內容。

JavaScript腳本：

創(chuàng)建一個包含基地成員工號和姓名的數組 members。
獲取顯示區(qū)域的元素。
實現 startScroll 函數，用于開始滾動。
實現 stopScroll 函數，用于停止?jié)L動。
實現 generateDisplayText 函數，用于生成顯示區(qū)域的內容。
在點擊開始按鈕時，啟動定時器，每100毫秒更新一次顯示區(qū)域的內容，實現滾動效果。
在點擊結束按鈕時，清除定時器，停止?jié)L動。

按鈕事件：

通過按鈕的 onclick 屬性，將相應的函數綁定到按鈕上，實現開始和結束的控制。

代碼部分

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>成員工號和姓名滾動</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 50px;
        }

        #displayArea {
            font-size: 24px;
            font-weight: bold;
            height: 50px;
            overflow: hidden;
            border: 1px solid #ccc;
            margin-bottom: 20px;
        }

        #controlArea {
            margin-top: 20px;
        }

        button {
            font-size: 18px;
            padding: 10px 20px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <!-- 顯示區(qū)域 -->
    <div id="displayArea"></div>

    <!-- 控制區(qū)域 -->
    <div id="controlArea">
        <button onclick="startScroll()">開始</button>
        <button onclick="stopScroll()">結束</button>
    </div>

    <script>
        // 假設基地成員的工號和姓名存儲在一個數組中
        var members = [
            { id: '001', name: '譚' },
            { id: '002', name: '李' },
            { id: '003', name: '吳' },
            { id: '004', name: '譚1' },
            { id: '005', name: '李2' },
            { id: '006', name: '吳3' },
            { id: '007', name: '譚4' },
            { id: '008', name: '李5' },
            { id: '009', name: '吳6' },
            // 添加更多成員...
        ];

        // 獲取顯示區(qū)域的元素
        var displayArea = document.getElementById('displayArea');
        // 設置顯示區(qū)域的初始內容
        displayArea.textContent = generateDisplayText();

        // 變量聲明，用于存儲定時器和滾動狀態(tài)
        var scrollInterval;
        var isScrolling = false;

        // 開始滾動函數
        function startScroll() {
            // 防止重復啟動滾動
            if (!isScrolling) {
                // 設置滾動狀態(tài)為 true
                isScrolling = true;
                // 啟動定時器，每100毫秒更新一次顯示區(qū)域的內容
                scrollInterval = setInterval(function() {
                    displayArea.textContent = generateDisplayText();
                }, 100);
            }
        }

        // 停止?jié)L動函數
        function stopScroll() {
            // 清除定時器
            clearInterval(scrollInterval);
            // 設置滾動狀態(tài)為 false
            isScrolling = false;
        }

        // 生成顯示區(qū)域的內容函數
        function generateDisplayText() {
            // 從成員數組中隨機選擇一位成員
            var randomMember = members[Math.floor(Math.random() * members.length)];
            // 返回工號和姓名的字符串
            return `工號：${randomMember.id}，姓名：${randomMember.name}`;
        }
    </script>
</body>
</html>

到此這篇關于JavaScript實現隨機點名的示例代碼的文章就介紹到這了,更多相關JavaScript隨機點名內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: