js实现简单的随机点名

2023-06-04 11:42| 来源: 网络整理| 查看: 265

实现简单的点名操作

运用定时器setInterval()，随机函数parseInt(Math.random() * name.length)，点击事件实现start.addEventListener('click', function () {}实现简单的点击操作。

HTML部分这里显示名字开始随机点名结束随机点名复制代码获取标签

获取标签，声明数组数据

//获取标签 let p = document.querySelector('p') let start = document.querySelector('.start') let end = document.querySelector('.end') let name = ['饺子', '煲仔饭', '木桶饭', '汤饭', '黄焖鸡', '不吃了'] 复制代码开始点击事件 //注意作用域问题，要在外面声明 let num, arr //开始点击事件 start.addEventListener('click', function () { //定时器 arr = setInterval(function () { //取随机数 num = parseInt(Math.random() * name.length) // 输出数据 let numes = name[num] p.innerText = numes }, 1000) }) 复制代码

效果如下：

结束点击事件

删除上一个出现的元素，避免重复，无元素时禁用按钮(不禁用，继续点名会出现undefinder)

//结束点击事件 end.addEventListener('click', function () { //停止定时器 clearInterval(arr) // 删除出现的元素 name.splice(num, 1) //无元素时，禁用按钮 if (name.length === 0) { start.disabled = true } }) 复制代码

效果如下：

不能实现的功能

如果直接的点击结束按钮会使，数组中的数据删除，下次点击开始，会直接出现undefined

连续点击，会出现计时器叠加

【本文地址】

公司简介

联系我们