JS--demo实现随机点名

逻辑就是通过点击事件得到数组里面的随机一个值,再把这个值给删除,当数组长度为1的时候,停止点名,用disabled属性让用户不能进行点击。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><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;}</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><script>// 数据数组const arr = ['马超', '黄忠', '赵云', '关羽', '张飞']// 定时器的全局变量let timerId = 0// 随机号要全局变量let random = 0// 业务1.开始按钮模块const qs = document.querySelector('.qs')// 1.1 获取开始按钮对象const start = document.querySelector('.start')// 1.2 添加点击事件start.addEventListener('click', function () {timerId = setInterval(function () {// 随机数random = Math.floor(Math.random() * arr.length)// console.log(arr[random])qs.innerHTML = arr[random]}, 1000)// 如果数组里面只有一个值了,还需要抽取吗?  不需要  让两个按钮禁用就可以if (arr.length === 1) {// start.disabled = true// end.disabled = truestart.disabled = end.disabled = true}})// 2. 关闭按钮模块const end = document.querySelector('.end')end.addEventListener('click', function () {clearInterval(timerId)  //消除定时器// 结束了,可以删除掉当前抽取的那个数组元素arr.splice(random, 1)console.log(arr)})</script>
</body></html>

--

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/800059.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

双数列-力扣-打家劫舍2

一个专业的小偷&#xff0c;计划偷窃一个环形街道上沿街的房屋&#xff0c;每间房内都藏有一定的现金。这个地方所有的房屋都 围成一圈 &#xff0c;这意味着第一个房屋和最后一个房屋是紧挨着的。同时&#xff0c;相邻的房屋装有相互连通的防盗系统&#xff0c;如果两间相邻的…

ESB总线集成方案:优劣势的深度解析

在信息化时代&#xff0c;企业面临着业务快速扩展、系统日益复杂、数据交互需求不断增加的挑战。为了有效整合各种资源&#xff0c;优化业务流程&#xff0c;提高运营效率&#xff0c;企业服务总线&#xff08;ESB&#xff09;集成方案应运而生。本文将详细探讨ESB总线集成方案…

day13 模块与包

一.模块 ```python 什么是模块? 模块:就是一个python文件 当python文件作为一个模块的时候,文件名就是模块名,demo1.py (demo1就是模块名) 作用: 可以调用其他python文件的代码,功能,可以更灵活的实现和使用了,添加很多各种效果 变量 = 存储一个/多个数据 函数 = 存储一句…

Android匿名共享内存(Ashmem)

在Android中我们熟知的IPC方式有Socket、文件、ContentProvider、Binder、共享内存。其中共享内存的效率最高&#xff0c;可以做到0拷贝&#xff0c;在跨进程进行大数据传输&#xff0c;日志收集等场景下非常有用。共享内存是Linux自带的一种IPC机制&#xff0c;Android直接使用…

基于单片机体温心率检测仪系统设计

**单片机设计介绍&#xff0c; 基于单片机体温心率检测仪系统设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机体温心率检测仪系统设计是一个综合性的项目&#xff0c;旨在通过单片机及其外围电路实现对人体体温和心…

山寨windows

我的目标是能够运行windows 下的大部分PE格式的程序&#xff0c;这一点通过实验已经证明完全是可行的。 PE格式主要有exe dll sys等文件&#xff0c;这三个文件可以用相同的函数解析&#xff0c; 主要有以下段组成&#xff0c; 1、文件头&#xff0c;包含DOS文件头、PE文件头…

Android 11 上的文件读写无权限问题

Android 6以上需要动态申请读写权限&#xff0c;但是11以上动态申请了读写权限也是无效。并且手动给予权限没有该按钮。 如上图华为钱包有个所有文件权限、但是百度地图只有仅媒体权限&#xff0c;仅媒体权限&#xff08;动态申请读写权限&#xff09;给予后软件还是没法访问文…

DSOX3034T是德科技DSOX3034T示波器

181/2461/8938产品概述&#xff1a; 特点: 带宽:350 MHz频道:4存储深度:4 Mpts采样速率:5 GSa/s更新速率:每秒1000000个波形波形数学和FFT自动探测接口用于连接、存储设备和打印的USB主机和设备端口 触摸: 8.5英寸电容式触摸屏专为触摸界面设计 发现: 业界最快的无损波形更…

10分钟上手:MySQL8的Json格式字段使用总结干货

一、关于效率和适用范围 尽管官方承诺Json格式字段采用了空间换时间的策略&#xff0c;比Text类型来存储Json有大幅度的效率提升。但是Json格式的处理过程仍然效率不及传统关系表&#xff0c;所以什么时候用Json格式字段尤为重要。 只有我们确定系统已经能精确定位到某一行&am…

Mysql主键优化之页分裂与页合并

主键设计原则 满足业务需求的情况下&#xff0c;尽量降低主键的长度。因为如果主键太长&#xff0c;在多个二级索引中&#xff0c;主键索引值所占用的空间就会过大。 插入数据时&#xff0c;尽量选择顺序插入&#xff0c;选择使用AUTO_INCREMENT自增主键。因为乱序插入会导致页…

[C++][异常]详解

目录 1.C语言传统的处理错误的方式2.C异常概念3.异常的抛出和捕获4.异常的重新抛出5.异常安全6.异常规范7.自定义异常体系8.C标准库的异常体系9.异常的优缺点1.C异常的优点2.C异常的缺点3.总结 1.C语言传统的处理错误的方式 传统的错误处理机制 终止程序&#xff0c;如assert …

Pillow教程:对比两张图片是否相同

---------------Pillow教程集合--------------- Python项目18&#xff1a;使用Pillow模块&#xff0c;随机生成4位数的图片验证码 Python教程93&#xff1a;初识Pillow模块&#xff08;创建Image对象查看属性图片的保存与缩放&#xff09; Pillow教程02&#xff1a;图片的裁…

Go语言中如何实现多态

完整课程请点击以下链接 Go 语言项目开发实战_Go_实战_项目开发_孔令飞_Commit 规范_最佳实践_企业应用代码-极客时间 在Go语言中&#xff0c;虽然没有像其他面向对象语言&#xff08;如Java或C&#xff09;中那样的显式的类继承和多态机制&#xff0c;但通过接口和方法的组合…

Linux gcc day5粘滞位

粘滞位 背景&#xff1a;一定时在一个公共目录&#xff08;root创建&#xff09;下。进行临时文件的操作 Linux系统中有很多人&#xff0c;我们需要在一个公共目录下&#xff0c;进行临时文件的操作&#xff08;增删查改&#xff09; 创建一个根目录下的dir&#xff08;mytmp…

代码随想录算法训练营day33

题目&#xff1a;1005.K次取反后最大化的数组和、134. 加油站、135. 分发糖果 参考链接&#xff1a;代码随想录 1005.K次取反后最大化的数组和 思路&#xff1a;本题还是直觉&#xff0c;想使得整体的数组和最大&#xff0c;需要每一次取反都尽可能使的全局最优。先将数组排…

算法练习----力扣每日一题------5

原题链接 894. 所有可能的真二叉树 - 力扣&#xff08;LeetCode&#xff09; 题目解析 给一个整数&#xff0c;返回所有可能的真二叉树vector<TreeNode*>类型&#xff0c;每棵树的val都必须为0 真二叉树&#xff1a;每个节点都有零个或两个元素 解题思路 要求一个含有n个…

网路维护基础知识

1、路由器 路由器&#xff1a;路由器就是将一个可以接入互联网的网路地址分成若干个网路地址可供终端设备连接的网路设备&#xff0c;设备既可以通过有线连接也可以通过无线连接进入互联网 2、交换机 交换机&#xff1a;个人感觉交换机只是为那些有线网路设计的&#xff0c;…

js-Vue创建公共的JavaScript工具类

Vue前端项目中创建了一个公共的JavaScript工具类&#xff0c;并定义了一些公共方法后&#xff0c;可以在需要的组件中引用并调用这些公共方法。 1.创建一个名为 utils.js 的JavaScript文件&#xff0c;定义一个公共的工具类&#xff0c;包含一个用于计算平方的方法&#xff1a;…

与汇智知了堂共舞,HW行动开启你的网络安全新篇章!

**网安圈内一年一度的HW行动来啦&#xff01; ** 招募对象 不限&#xff0c;有HW项目经验 或持有NISP二级、CISP证书优先 HW时间 以官方正式通知为准 工作地点&#xff1a;全国 薪资待遇 带薪HW &#xff08;根据考核成绩500-4000元/天不等&#xff09; 招募流程 1.填写报名…

2024-4-7

今日流水账&#xff1a; 早上突然收到了腾讯科恩实验室的 HR 面试邮件&#xff0c;挺开心的&#xff0c;然后准备了一上午&#xff0c;下午面试下面面试不到15分钟就草草结束了&#xff0c;感觉应该是寄了 记录一下今日自己的心得吧&#xff1a; 由于是第一次 HR 面试&#…