脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript随机点名

JavaScript实现随机点名的示例代码

 更新时间：2023年11月27日 08:27:29   作者：Tsugumi  
这篇文章主要为大家详细介绍了如何使用JavaScript实现随机点名效果,文中的示例代码简洁易懂,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下

需求

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

演示图

思路

HTML结构：

包含一个用于显示的区域 displayArea 和一个控制区域 controlArea，控制区域包括开始和结束两个按钮。

CSS样式：

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

JavaScript脚本：

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

按钮事件：

  • 通过按钮的 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>
    <!-- 显示区域 -->
    <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>

到此这篇关于JavaScript实现随机点名的示例代码的文章就介绍到这了,更多相关JavaScript随机点名内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论