JS案例学习——随机点名案例

随机点名案例，如图所示：

一、业务分析

①点击开始按钮随机抽取数组中的一个数据，放在页面中

②点击结束按钮删除数组当前抽取的一个数据

③当抽取到最后一个数据的时候，开始和结束两个按钮同时禁用

④点击重置按钮后，数组恢复，开始和结束两个按钮允许使用

二、核心分析

①利用定时器快速展示，停止定时器结束展示

②按钮监听事件

三、代码实现

①点击开始按钮随机抽取数组中的一个数据，放在页面中，步骤如下：

a. 获取显示区域对象和开始按钮对象

b. 添加点击事件

// 1.1 获取开始按钮对象
const start = document.querySelector('.start')
// 获取显示区域对象
const qs = document.querySelector('.qs')
// 1.2 添加点击事件
start.addEventListener('click', function () {timeId = setInterval(function() {// 随机数random = parseInt(Math.random() * arr.length)qs.innerHTML = arr[random]}, 35)
})

②点击结束按钮删除数组当前抽取的一个数据

③当抽取到最后一个数据的时候，开始和结束两个按钮同时禁用

a. 获取结束按钮模块

b. 添加点击事件

// 2. 结束按钮模块
const end = document.querySelector('.end')
end.addEventListener('click', function() {clearInterval(timeId)// 结束了，可以删除掉当前抽取的那个数组元素arr.splice(random, 1)// 如果数组长度为0，则开始和结束按钮禁止点击if(arr.length === 0) {start.disabled = trueend.disabled = true}
})

④点击重置按钮后，数组恢复，开始和结束两个按钮允许使用

a. 获取重置按钮模块

b. 添加点击事件

// 3. 重置按钮模块
const restart = document.querySelector('.restart')
restart.addEventListener('click', function () {// 恢复数组arr = ['甲', '乙', '丙', '丁', '戊']// 按钮恢复点击start.disabled = falseend.disabled = false
})

四、完整代码展示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}h2 {text-align: center;}.box {width: 600px;margin: 50px auto;display: flex;font-size: 25px;line-height: 40px;}.qs {width: 450px;height: 40px;color: red;}.btns {text-align: center;}.btns button {width: 120px;height: 35px;margin: 0 50px;}.restart {display: block;width: 120px;height: 35px;margin: 20px auto;}</style>
</head>
<body><h2>随机点名</h2><div class="box"><span>名字是：</span><div class="qs">这里显示姓名</div></div><div class="btns"><button class="start">开始</button><button class="end">结束</button></div><button class="restart">重置</button><script>/* 随机点名案例业务分析：①点击开始按钮随机抽取数组中的一个数据，放到页面中②点击结束按钮删除数组当前抽取的一个数据③当抽取到最后一个数据的时候，两个按钮同时禁用(写点开始里面，只剩最后一个数据不用抽了)核心：利用定时器快速展示，停止定时器结束展示*/// 数据数组let arr = ['甲', '乙', '丙', '丁', '戊']// 定时器的全局变量let timerId = 0// 随机号要全局变量let random = 0// 业务1，开始按钮模块// 1.1 获取开始按钮对象const start = document.querySelector('.start')// 获取显示区域对象const qs = document.querySelector('.qs')// 1.2 添加点击事件start.addEventListener('click', function () {timeId = setInterval(function() {// 随机数random = parseInt(Math.random() * arr.length)qs.innerHTML = arr[random]}, 35)})// 2. 结束按钮模块const end = document.querySelector('.end')end.addEventListener('click', function() {clearInterval(timeId)// 结束了，可以删除掉当前抽取的那个数组元素arr.splice(random, 1)// 如果数组长度为0，则开始和结束按钮禁止点击if(arr.length === 0) {start.disabled = trueend.disabled = true}})// 3. 重置按钮模块const restart = document.querySelector('.restart')restart.addEventListener('click', function () {// 恢复数组arr = ['甲', '乙', '丙', '丁', '戊']// 按钮恢复点击start.disabled = falseend.disabled = false})</script>
</body>
</html>

五、效果展示

①初始页面

②点击开始按钮，显示区域滚动名字

③点击结束按钮，显示区域停止滚动

④连续进行五次开始结束后，数组清空，开始和结束按钮禁止点击

⑤点击重置按钮后，开始和结束按钮恢复点击，所有功能正常

六、反思总结

①维护性待提高。arr数组一旦改变，则需要更改两处

②实践时，曾添加while(true)包在外面，结果页面无法加载，原因在与无限循环+按钮监听无限运行，导致无法加载，所以一般不要用while(true)

JS案例学习——随机点名案例相关推荐

* 完成随机点名案例；学生姓名都提前写在文件中；:每次敲回车,随机显示一个学生姓名,每人最多显示一次,所有人都显示完了就结束程序；
import java.io.BufferedReader; import java.io.File; import java.io.FileReader; import java.io.IOExce ...
第四章案例随机点名案例
第四章案例随机点名案例案例需求分析: 在全班同学中随机的打印出一名同学名字. 我们对本案例进行分析,得出如下分析结果: 1.存储全班同学名字 2.打印全班同学每一个人的名字 3.在班级总人数范围 ...
HTML+CSS+JS实现网页随机点名
HTML+CSS+JS实现网页随机点名大家好,我是小王,一个很喜欢Coding的小女孩. 很喜欢这句话:人数没有白走的路,每一步都算数,关注我,后期分享更多资源! 效果如下: 部分代码如下: < ...
用JS实现一个随机点名系统（五）
用JS实现一个随机点名系统每次上课前10分钟,老师都会叫我们回答问题,奈何每次都是点学号,好像每次我都能中奖,我直接跟老师提议,老师,我用来JS来帮你写个随机点名的系统吧!这样就不会每次都抽到我了 ...
学生随机点名PHP,JS实现课堂随机点名和顺序点名
1. 效果: 2. Html代码: 随机点名区域 3. JavaScript代码: var i = 0; //t用来接收setTimeOut()的返回值 var t; var st = ['张三',' ...
android开发问卷调查案例_Android开发Handler的简单使用——随机点名案例
前言我们知道,Android的UI线程也叫主线程,工作线程(子线程)主要是负责执行耗时操作的线程,如果我们在子线程处理完事物后,需要通知UI线程更新界面.那么,子线程如何通知UI更新呢,这个就是通过 ...
js html转盘点名,原生JS实现简易随机点名功能
定时器的工作原理,这里将用引用How JavaScript Timers Work中的例子来解释定时器的工作原理,该图为一个简单版的原理图.· 上图中,左侧数字代表时间,单位毫秒:左侧文字代表某一个操 ...
js做个随机点名的小游戏
用JavaScript做个随机点名的小游戏,用一个开关控制点名程序的开始与暂停 <!DOCTYPE html> <html lang="zh"><he ...
Java案例：随机点名程序
文章目录一.运行效果二.涉及知识点三.实现步骤 (一)创建Java项目 (二)准备班级花名册数据 (三)创建包.创建类 (四)运行程序,查看结果一.运行效果默认是列表框里的第一个班级,可以选 ...

JS案例学习——随机点名案例

JS案例学习——随机点名案例相关推荐

最新文章

热门文章