脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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随机点名内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • JavaScript中立即执行函数实例详解

    JavaScript中立即执行函数实例详解

    javascript和其他编程语言相比比较随意，所以javascript代码中充满各种奇葩的写法，有时雾里看花，当然，能理解各型各色的写法也是对javascript语言特性更进一步的深入理解。这篇文章主要给大家介绍了关于JavaScript中立即执行函数的相关资料，需要的朋友可以参考下。
    2017-11-11
  • js的form表单提交url传参数(包含+等特殊字符)的两种解决方法

    js的form表单提交url传参数(包含+等特殊字符)的两种解决方法

    下面小编就为大家带来一篇js的form表单提交url传参数(包含+等特殊字符)的两种解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • ES6新特性之解构、参数、模块和记号用法示例

    ES6新特性之解构、参数、模块和记号用法示例

    这篇文章主要介绍了ES6新特性之解构、参数、模块和记号用法,结合实例形式分析了解构、参数、模块和记号的功能、用法及相关使用注意事项,需要的朋友可以参考下
    2017-04-04
  • 索趣科技的答案

    索趣科技的答案

    索趣科技的答案...
    2007-02-02
  • JavaScript 中的 `==` 和 `===` 操作符详解

    JavaScript 中的 `==` 和 `===` 操作符详解

    在 JavaScript 中,== 和 === 是两个常用的比较操作符,分别用于 宽松相等（类型转换相等） 和 严格相等（类型和值必须相等） 的比较,理解它们的区别以及具体的比较规则对于编写准确和高效的代码至关重要,需要的朋友可以参考下
    2024-09-09
  • 使用JavaScript实现页面局部更新的方法总结

    使用JavaScript实现页面局部更新的方法总结

    在JavaScript中,Ajax（Asynchronous JavaScript and XML）是一种用于在后台与服务器进行异步通信的技术,本文给大家介绍了使用JavaScript实现页面局部更新的三种方法,文中通过代码示例给大家介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • 浅谈JavaScript正则表达式分组匹配

    浅谈JavaScript正则表达式分组匹配

    一个正则表达式要如何书写才能同时匹配这两个数字呢？简单的字符表达式当然无法完成了，这个时候我们就可以定义一个字符集合（字符类）来进行匹配。这就是分组匹配了
    2015-04-04
  • javascript滚轮控制模拟滚动条

    javascript滚轮控制模拟滚动条

    这篇文章主要为大家详细介绍了javascript滚轮控制模拟滚动条的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-10-10
  • JavaScript中Math对象相关知识全解

    JavaScript中Math对象相关知识全解

    Math对象中的方法很常用,来跟我一起看看吧,下面这篇文章主要给大家介绍了关于JavaScript中Math对象相关知识全解的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • 利用HTML5的画布Canvas实现刮刮卡效果

    利用HTML5的画布Canvas实现刮刮卡效果

    大家都玩过刮刮乐吧，都想一夜暴富，本文给大家分享一款利用HTML5的画布Canvas实现刮刮卡效果，需要的朋友可以参考下
    2015-09-09

最新评论