使用原生JavaScript实现随机点名功能

版权申诉

2 浏览量更新于2024-08-20 收藏 18KB DOCX 举报

“如何使用原生Js实现随机点名详解” 在JavaScript中实现一个随机点名器是一个常见的前端小项目，它可以帮助我们学习基本的DOM操作和数组处理。下面将详细介绍如何使用JavaScript实现这个功能。首先，我们需要一个包含学生姓名的数组。在提供的代码中，我们看到一个名为`nameArr`的变量，其中存储了多个学生的名字。这些名字被用作随机选择的基础。 ```javascript var nameArr = [ "空", "张家家", "许雪雪", "王橘橘", "陈韵", "马本本", "张志志", "唐豪豪", "高洋洋", "朱阳阳", "王山山", "空", "尹方方", "王零零", "李远远", "吴杰", "李玉玉", "李雯雯", "步一一", "" ]; ``` 接着，我们需要在HTML中创建用户界面。这里有一个简单的布局，包括两个按钮（开始和结束）以及一个用于显示点名结果的`div`元素： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>点名</title> <link href="bootstrap.min.css" type="text/css" rel="stylesheet">  </head> <body onload="A()"> <div class="wai" align="center"> <table> <button class="start" onclick="start()">开始</button> <button class="end" onclick="end()">结束</button> </table> <div id="names"></div> </div>  </body> </html> ``` 在CSS部分，我们定义了按钮和显示姓名的`div`元素的样式，使其看起来更美观。为了实现点名功能，我们需要编写JavaScript函数来处理按钮点击事件。在提供的代码中，有两个函数：`start()` 和 `end()`。`start()` 函数用于开始点名，而 `end()` 函数则用于结束并清除当前的点名结果。 ```javascript function start() { var namesDiv = document.getElementById('names'); namesDiv.innerHTML = ''; // 从nameArr中随机选择一个名字 var randomIndex = Math.floor(Math.random() * nameArr.length); var randomName = nameArr[randomIndex]; // 防止选择到“空”值 while (randomName === "空") { randomIndex = Math.floor(Math.random() * nameArr.length); randomName = nameArr[randomIndex]; } // 在界面上显示随机选中的名字 namesDiv.innerHTML = '<p>' + randomName + '</p>'; } function end() { document.getElementById('names').innerHTML = ''; } ``` `start()`函数首先清空`names` div中的内容，然后生成一个随机索引，从`nameArr`中选取一个名字。为了避免选择到"空"值，我们使用了一个循环来确保选取到有效名字。最后，将随机选取的名字添加到界面上。 `end()`函数则简单地清空了`names` div，以便于重新开始点名。以上就是使用原生JavaScript实现随机点名器的基本步骤。通过这个项目，我们可以学习到JavaScript中的数组操作、DOM元素的访问与修改、事件处理以及简单的条件判断。这个点名器可以作为一个基础的练习，帮助初学者更好地理解JavaScript在实际应用中的工作方式。

mmoo_python

粉丝: 6292
资源: 1万+

使用原生JavaScript实现随机点名功能

【JavaScript源代码】js实现随机点名功能.docx

Git 使用教程详解.docx

Golang 开发框架详解.docx

原生html、js 实现上传.doc .docx 文件并获取上传文件的二进制数据

系统源代码使用说明.docx

两个docx文档，1.docx和2.docx，需要将1.docx文档中的页眉页脚复制到2.docx，用java编写，使用开源jar包，比如poi，poi-tl，docx4j等等，请注意验证你提供的代码中的方法，麻烦给我源码。

使用python将xx文件夹下的.sv文件复制到mode.docx文件并另存为.sv文件名的.docx文件

两个docx文档，1.docx和2.docx，需要将1.docx文档中的页眉页脚同步到2.docx，用java编写，使用开源jar包，比如poi，poi-tl，docx4j等等，麻烦给我源码

.docx文件在vscode打开后。.docx文件发生了错误

最新资源