随机点名(简单易上手)
实现此功能的核心思路:
1、第一步需要给定一个数组,里面存放需要的名字
2、第二步也是最核心的一步,需要根据数组的长度生成一个随机数
3、定义一个定时器来实现功能的重复调用,以实现功能
代码实现:
1、准备一个简单的布局
css布局
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 100px;
margin: 0 auto;
border: 1px solid red;
}
button {
margin: 0 44px;
}
#name {
width: 300px;
height: 80px;
margin-top: 10p;
/* border:1px solid darkcyan; */
display: flex;
align-items: center;
justify-content: center;
}
HTML结构
<div class="box">
<button id="began">开始点名</button>
<button id="over">结束点名</button>
<div id="name">显示区域</div>
</div>
页面效果
2、JS代码实现功能
2.1准备数据
let arr = [
'梦白', '访梦', '蓉诗旋', '尔芙', '迎蓉', '念寒', '翠绿'
, '独孤败天', '苏柔', '顾', '南宫', '睿渊', '沈意安', '沈星沅', '沈夙鸢', '沈清涵', '沈姝婉',
, '沈歆然', '沈玉辞', '沈清茉', '沈宴禾',
'沈枫月', '沈如曦', '沈乔薇', '沈佳雪', '沈微云', '沈喻竹', '沈念', '沈溪年', '沈柚白', '沈念深',
]
2.2实现功能
// 获取元素节点
let began = document.querySelector('#began');
let over = document.querySelector('#over');
let Name = document.querySelector('#name');
// 定义一个定时器变量,方便后面开启关闭定时器(null没有实质作用,占个位置)
let timer = null;
// 将要实现的功能封装进函数
function getName(arr) {
// 生成随机数(最核心的逻辑)
/*
这里的随机数需要根据数据的长度来生成
使用parseInt是为了给生成的随机数取整
*/
let num = parseInt(Math.random() * arr.length);
// 获取随机生成的名字(逻辑根据随机生成的num来获取数组的数据)
let ranomName = arr[num];
// 显示到页面
Name.innerHTML = ranomName;
}
// 点击开始按钮就执行随机获取名字功能
began.addEventListener('click', () => {
// 因为名字要随机获取,所以获取名字的函数要执行多次,就需要定时器
// 这里注意一个问题,如果连续点击开始按钮。会出现定时器累加的问题,清除的定时器是最后一个定时,前面设置的清除不了
// 所有在开启定时器之前,需要清除之前的定时器
clearInterval(timer)
timer = setInterval(() => {
getName(arr);
}, 60)
});
// 点击结束按钮停止点名(也就是清除定时器)
over.addEventListener('click', () => {
clearInterval(timer)
})
这就是比较简易的随机点名,只实现的功能。后期的样式美化还没做,仅供参考,有更好的方法或者代码错误的,还望赐教。