05.demo 随机点名

需求

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

演示图

思路

  1. HTML结构:

    • 包含一个用于显示的区域 displayArea 和一个控制区域 controlArea,控制区域包括开始和结束两个按钮。
  2. CSS样式:

    • 设置基本样式,包括字体、文本大小、边距等。
    • displayArea 使用 overflow: hidden 隐藏溢出的内容。
  3. JavaScript脚本:

    • 创建一个包含基地成员工号和姓名的数组 members
    • 获取显示区域的元素。
    • 实现 startScroll 函数,用于开始滚动。
    • 实现 stopScroll 函数,用于停止滚动。
    • 实现 generateDisplayText 函数,用于生成显示区域的内容。
    • 在点击开始按钮时,启动定时器,每100毫秒更新一次显示区域的内容,实现滚动效果。
    • 在点击结束按钮时,清除定时器,停止滚动。
  4. 按钮事件:

    • 通过按钮的 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>
相关推荐
ら陈佚晨11 小时前
React 18 的核心设计理念:并发渲染
前端·javascript·react.js·前端框架·fiber
SEO-狼术12 小时前
Stimulsoft Reports.JS 2025
开发语言·javascript·ecmascript
渣哥12 小时前
用错注入方式?你的代码可能早就埋下隐患
javascript·后端·面试
一枚前端小能手12 小时前
🔍 重写vue之ref和reactive
前端·javascript·vue.js
芒果茶叶12 小时前
深入浅出requestAnimationFrame
前端·javascript·html
歪歪10013 小时前
在哪些场景下适合使用 v-model 机制?
服务器·前端·javascript·servlet·前端框架·js
渣哥13 小时前
Spring 创建 Bean 的多种方式对比与最佳实践
前端·javascript·面试
SanOrintea13 小时前
electron中进程线程之间通信方式
服务器·javascript·electron
Copper peas13 小时前
axios使用过程
前端·javascript·vue.js
转转技术团队13 小时前
当 AI 走进前端开发:代理插件的全流程开发实践
前端·javascript·ai编程