05.demo 随机点名

需求

分为上下两个部分，上方为显示区域，下方为控制区域。显示区域显示基地所有成员的工号和姓名，控制区域由开始和结束两个按钮组成。点击开始按钮，显示区域里的内容开始滚动，点击结束按钮，内容滚动停止，随机显示一位成员的工号和姓名

演示图

思路

HTML结构：
- 包含一个用于显示的区域 displayArea 和一个控制区域 controlArea，控制区域包括开始和结束两个按钮。
CSS样式：
- 设置基本样式，包括字体、文本大小、边距等。
- displayArea 使用 overflow: hidden 隐藏溢出的内容。
JavaScript脚本：
- 创建一个包含基地成员工号和姓名的数组 members。
- 获取显示区域的元素。
- 实现 startScroll 函数，用于开始滚动。
- 实现 stopScroll 函数，用于停止滚动。
- 实现 generateDisplayText 函数，用于生成显示区域的内容。
- 在点击开始按钮时，启动定时器，每100毫秒更新一次显示区域的内容，实现滚动效果。
- 在点击结束按钮时，清除定时器，停止滚动。
按钮事件：
- 通过按钮的 onclick 属性，将相应的函数绑定到按钮上，实现开始和结束的控制。

代码部分

xml 复制代码

<!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>
    <!-- 显示区域 -->
    <div id="displayArea"></div>

    <!-- 控制区域 -->
    <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' },
            // 添加更多成员...
        ];

        // 获取显示区域的元素
        var displayArea = document.getElementById('displayArea');
        // 设置显示区域的初始内容
        displayArea.textContent = generateDisplayText();

        // 变量声明，用于存储定时器和滚动状态
        var scrollInterval;
        var isScrolling = false;

        // 开始滚动函数
        function startScroll() {
            // 防止重复启动滚动
            if (!isScrolling) {
                // 设置滚动状态为 true
                isScrolling = true;
                // 启动定时器，每100毫秒更新一次显示区域的内容
                scrollInterval = setInterval(function() {
                    displayArea.textContent = generateDisplayText();
                }, 100);
            }
        }

        // 停止滚动函数
        function stopScroll() {
            // 清除定时器
            clearInterval(scrollInterval);
            // 设置滚动状态为 false
            isScrolling = false;
        }

        // 生成显示区域的内容函数
        function generateDisplayText() {
            // 从成员数组中随机选择一位成员
            var randomMember = members[Math.floor(Math.random() * members.length)];
            // 返回工号和姓名的字符串
            return `工号：${randomMember.id}，姓名：${randomMember.name}`;
        }
    </script>
</body>
</html>