Hi，本文将教大家如何使用JavaScript创建一个随机点名网页程序，本文为本人课程正在学习的内容，因此展示的内容、代码语法可能不正确，还请理解（李姐万岁）
一、效果展示
![图片[1] - JavaScript 随机点名程序 - 北牧日记](https://s21.ax1x.com/2024/03/28/pFI57md.jpg)
二、创建HTML界面
首先，创建一个简单的HTML随机点名网页，本文使用Bootstrap框架对HTML界面进行美化修饰。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.css">
<title>BeiMu 随机点名程序</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
/* 渐变背景色 */
background: linear-gradient(to left, #03a9f4, #f441a5);
}
h2 {
text-align: center;
font-weight: bold;
}
.box {
width: 600px;
margin: 20% auto;
display: flex;
font-size: 25px;
line-height: 40px;
}
.qs {
width: 450px;
height: 40px;
color: yellow;
}
.btns {
text-align: center;
margin-top: -15%;
}
.btns button {
width: 120px;
height: 35px;
margin: 0 50px;
}
</style>
</head>
<body>
<!-- <h2 class="bg-danger pt-3 pb-3"> +++ 随 机 点 名 +++</h2> -->
<div class="box badge badge-danger">
<span>姓 名：</span>
<div class="qs">等待数据</div>
</div>
<div class="btns">
<button class="start btn btn-warning text-dark">开始</button>
<button class="end btn btn-danger" disabled>结束</button>
</div>
</body>
</html>三、Js事件
使用Js对HTML的两个按钮和显示名字的区域创建绑定事件和监听事件
// 获取HTML元素，绑定元素
let Div = document.querySelector('.qs');
let Start = document.querySelector('.start');
let End = document.querySelector('.end');// 对绑定的元素进行点击事件监听
Start.addEventListener('click', function () {});
End.addEventListener('click', function () {});创建一个数组用于放置点名的人员姓名
let arr = ['马超', '黄忠', '赵云', '关羽', '张飞'];创建一个随机数函数用于之后的绑定数组，获取数组元素的下标
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}创建一个函数，放置如下内容
function Time() {
let Result = getRandom(0, arr.length - 1);
Div.innerText = arr[Result];
// arr.splice(Result, 1);
}在Start的监听事件中创建一个定时器用于开启上面的函数，执行时间为80毫秒运行一次，并在End的监听事件中创建一个关闭定时器
// 全局变量
let ThisTime = 0;
// 开启定时器
ThisTime = setInterval(Time, 80);
//关闭定时器
clearInterval(ThisTime);此时运行此网页会发现有个小问题，当页面加载时，结束按钮应该为不可点击状态、当点击开始按钮时，开始按钮应该改变为不可点击状态，当点击结束按钮时，结束按钮应该改变为不可点击状态
可以在Start和End的监听事件中改变两个按钮的状态来解决
// Start监听事件
Start.disabled = true;
End.disabled = false;
// End监听事件
Start.disabled = false;
End.disabled = true;接下来实现当每次点击开始按钮抽取人数时，每一次抽取到的人名从程序中移除，以防止每一次抽取的人名相同，我选择在End监听事件中放入如下代码，当每次点击结束时当前抽取到的人名移除，不会进入下一次的抽取中。
// 全局变量
let Result = 0;
arr.splice(Result, 1);
console.log(arr);此时，这个网页趋于完善，当第一次抽取人数到最后时，数组中只有一个人时程序仍然会继续运行，我们需要当程序中仅剩一人时不可再次进行抽取，在Start的监听事件中进行判断。
// 判断数组的长度
if (arr.length < 2) {
Start.disabled = true;
End.disabled = true;
// 当人数小于两人时停止计时器
clearInterval(ThisTime);
console.log(`当前局内人数为一,停止抽取`);
}此时程序才基本完善~
四、整体代码
OK，本文到此结束，以上内容均为本人所学知识，学艺不精，如有错误还请理解。
温馨提示：最后更新于
2024-03-28 00:24:11，某些文章具有时效性，若有错误或已失效，请评论反馈。© 版权声明
THE END
暂无评论内容