点名页面

这里放一张页面模板图

功能实现

样式啥的就不说了 各有喜好

名单打乱

created() {
// 每次刷新页面打乱姓名排序
this.students.sort(() => 0.5 - Math.random())
// 当前名单的索引数组
this.studentsIndex = this.students.map((v, i) => i)
}

我把名单数据放在students数组里，在vue的钩子函数里进行的打乱

开始点名

按钮的文字通过computed计算属性绑定（双向数据绑定真香）

btnText() {
return this.intervalId ? '确定选择' : `点击随机抽取 ${this.num} 位`
}

点击事件逻辑

selectStudents() {
// 如果未开启定时器
if (!this.intervalId) {
this.intervalId = setInterval(() => {
// 获取到随机选中的学员索引数组
this.selectedStudentsIndex = this.studentsIndex.sort(() => 0.5 - Math.random()).slice(0, this.num)
}, 100)
}
// 开启了定时器
else {
clearInterval(this.intervalId)
this.intervalId = null
}
}

确认结束点名

html结构和css也放在这里

<style>
* {
margin: 0;
padding: 0;
}

body {
background-color: #232323;
color: #fff;
}

ul li {
display: inline-block;
padding: 10px;
margin-right: 5px;
border: 1px solid #fff;
border-radius: 21px;
color: #fff;
}

input {
width: 45px;
}

button {
position: relative;
top: 0;
left: 50%;
width: 90px;
height: 50px;
transform: translateX(-50%);
margin: 70px 0;
border-radius: 25px;
}

.current {
color: #000;
background-color: #fff;
transform: scale(1.2);
transition: all .3s;
}

.selectBtn {
width: 130px;
border-color: #fff;
background-color: #232323;
color: #fff;
}
</style>

<div id="app">
<div>
<p>总人数：{{students.length}}，抽取<input v-model="num" />人</p>
</div>
<button :class="intervalId ? '' : 'selectBtn'" @click="selectStudents">{{btnText}}</button>
<ul>
<li v-for="(item, i) in students" :key="item.id" :class="{ current: selectedStudentsIndex.includes(i) }">{{item}}</li>
</ul>
</div>