【JS】随机点名小案例

一、html

    <h2>随机点名</h2><div class="box"><span>名字是：</span><div class="qs">这里显示姓名</div></div><div class="btns"><button class="start">开始</button><button class="end">结束</button></div>

二、css

  * {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;}

三、js

 // 需求:点击开始随机抽取，点击结束输出结果// 业务分析:// 点击开始按钮随机抽取数组的一个数据，放到页面中// 点击结束按钮删除数组当前抽取的一个数据// 当抽取到最后一个数据的时候，两个按钮同时禁用// 核心:利用定时器快速展示，停止定时器结束展示// 数据数组let arr = ['马超', '黄忠', '赵云', '关羽', '张飞']//一、随机函数function getRandom(min, max) {return Math.floor(Math.random() * (max - min + 1)) + min}//二、获取元素let qs = document.querySelector('.qs')let start = document.querySelector('.start')let end = document.querySelector('.end')//timer得是全局变量。要不结束定时器那里不好使let timer = 0//random得是全局变量。要不结束定时器那里不好使let random = 0//三、给开始按钮添加事件start.addEventListener('click', function () {//快速随机抽数据--定时器// let timer = setInterval(function () {  不敢加let了 下面random前面的let也去掉timer = setInterval(function () {random = getRandom(0, arr.length - 1)//从数组下标0开始抽qs.innerHTML = arr[random]//把随机名字写到盒子中}, 25)//3.如果到了只剩最后一个人名，给两个按钮禁用//因为删除是在结束按钮的，在开始按钮里剩最后一个时候就不能点击了if (arr.length === 1) {// start.disabled = true// end.disabled = truestart.disabled = end.disabled = true}})//四、给结束按钮添加事件end.addEventListener('click', function () {//1. 点击它就停止定时器clearInterval(timer)//这时候会报错 说timer没有被定义，因为上面的定时器在函数里是块级作用域，把timer变成全局的//2.删除已经被点的人名arr.splice(random, 1)//这里也是和timer有作用域问题})

【JS】随机点名小案例相关推荐

Python wxpython篇 | Python生态库之图形用户界面开发库 “wxPython “ 的安装及使用（附. 使用pyinstaller 库打包Python随机点名小程序程序.exe文件）
全文目录 wxPython 图形用户界面 PyCharm 中安装 wxPython库 PyCharm中将程序打包成 .exe 可执行文件 wxPython 的使用第一个wxPython 程序自定义 ...
随机点名小程序 tkinter
随机点名小程序源码见github: https://github.com/linli1724647576/Random_roll_call 问题描述随机点名程序(越不来上课的人,被点中的概率越高, ...
Tkinter模块GUI界面化编程实战（四）——随机点名小程序（含详解及完整源码、完整程序下载链接）
[上期回顾:Tkinter模块GUI界面化编程实战(三)--2048小游戏] 这篇博客介绍了如何用Python Tkinter模块编写一个界面化的随机点名小程序,在博客下面有完整的源码,源码中有超详 ...
[Electron]仿写一个课堂随机点名小项目
自从前几个月下了抖音,无聊闲暇时就打会打开抖音,因为打开它有种莫名其妙打开了全世界的感觉... 无意中看到这个小视频:随机点名于是仿写了一个课堂点名小项目,算是对Electron的一个简单的认识,有 ...
Excel制作随机点名小程序
在Excel工作表中,通过空间命令按钮和VBA代码,可以省略很多简单重复的工作,例如点名.只要名单上有名字,就不需要人工拿着花名册挨个点名,在这里Excel就可以充当你的智能小助手. 一.按Alt+F ...
js随机调色板小特效 html+css
话都不多,先上效果: 你好呀,这是一个简单的随机取色器调色板的小案例,应该是比较常见的,所以我下面详细说说是怎么实现的~
SASS+Compass基本使用，结合JavaScript实现随机点名小系统
SASS+Compass基本使用,以一个随机点名demo为例 demo 源码:https://github.com/XieTongXue/call-over,效果请看(5),代码解释请看源码. (1) ...
python课堂随机点名_【工作中的Python】随机点名小脚本
背景:项目组每周的例会中,有一项固定内容就是技术分享,可以是与工作相关或无关的任何技术主题.进行技术分享讲解的同学是随机抽签的.由此做了一个Python的小脚本用于抽取姓名. 脚本内容如下: #!/u ...
js - WebSocket应用小案例
WebSocket 对象提供了用于创建和管理 WebSocket 连接,以及可以通过该连接发送和接收数据的 API. // 判断浏览器是否支持websocket if(window.WebSocket ...

【JS】随机点名小案例

【JS】随机点名小案例相关推荐

最新文章

热门文章