使用原生JavaScript实现随机点名功能
版权申诉
18KB |
更新于2024-08-20
| 3 浏览量 | 举报
收藏
限时特惠：#14.90 “如何使用原生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
- 粉丝: 1w+
我的内容管理
展开
最新资源
- Laravel框架入门：教程和赞助商概览
- 2013精美PPT模板设计下载
- 掌握Git与GitHub基础：从版本控制到协作平台
- 轻松集成Rahyab短信通知，使用Composer安装
- Amazon-crx插件：信用卡昵称管理器
- CoinDCX-Java：Java封装CoinDCX REST API使用指南
- ARP Spoof Sniffer：保障网站活动免受本地攻击
- Alibo.vn折扣管理工具 - Taobao、1688、Tmall购物助手
- scTyper：单细胞RNA-Seq数据细胞分型分析新工具
- Prisjakt Chrome扩展插件 - 快速搜索优惠价格
- Jupyter Federation: 探索便携式渲染技术
- 探索KDD 99安全数据集：详细分析与应用
- SSPMIS Bihar Online Payment Status与CRX插件应用
- CryptoPlanet产品导入：一键扩展您的在线商店
- crx插件提供全面的教育新闻与下载服务
- Jekyll官方Clean Blog主题快速开始指南
- GitHub基础与Git版本控制系统的初学者指南
- Chromium快速代理切换插件功能解析
- SwiftUI中的窗口系统实现：深入理解与应用
- GitHub存储库列表徽章插件：状态一目了然
- C++内存管理聊天机器人项目解析与优化指南
- Chrome扩展ClouDoc：云端文档代理插件
- Kem Trị Sẹo-crx插件: 深度审查疤痕修复方法
- 购物便捷助手：Backpack Assistant crx插件
