Vue实现随机点名
<!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>
li {
margin: 10px;
padding: 10px;
border: 1px solid white;
border-radius: 10px;
}
.active {
background-color: skyblue;
color: black;
transform: scale(1.3);
transition: transform 0.3s;
border: 1px solid gold;
}
#res {
width: 1200px;
height: 250px;
text-align: center;
margin-top: 100px;
}
#title {
font-size: 30px;
line-height: 50px;
color: gold;
margin-bottom: 20px;
}
#resName {
width: 100%;
height: 200px;
line-height: 200px;
border: 2px solid #000;
font-size: 30px;
color: skyblue;
}
</style>
</head>
<body style="background-color: purple; color: white;">
<div
style="display: flex; flex-flow: column; align-items: center;"
id="container"
>
<div>
总人数：<span>{{ students.length }}</span> 人，抽取：
<input type="text" v-model="size" :disabled="isDisabled" /> 位
</div>
<div>
<button
type="button"
style="height: 50px; font-size: 20px; margin-top: 30px; margin-bottom: 30px;"
@click="onBtnClick()"
>
{{ btnText }}
</button>
</div>
<div>
<ul
style="list-style: none; margin: 0; padding: 0; display: flex; flex-flow: row wrap;"
>
<li
v-for="(v, i) in students"
:key="i"
:class="{ active: selectedStudentIndexs.includes(i) }"
>
{{ v }}
</li>
</ul>
</div>
<div id="res" v-if="showName">
<div id="title">小倒霉蛋</div>
<div id="resName">
<span v-for="(v,i) in selectedStudentName">{{ v }} </span>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#container',
data() {
return {
students: [
'张三1'，
'张三2'，
'张三3'，
'张三4'，
'张三5'，
'张三6'，
'张三7'，
'张三8'，
'张三9'，
'张三10'，
'张三11'，
'张三12'，
'张三13'，
'张三14'，
'张三15'，
'张三16'，
'张三17'，
'张三18'，
'张三19'，
'张三20'，
],
studentIndexs: [],
size: 1,
selectedStudentIndexs: [],
intervalId: null,
selectedStudentName: [],
showName: false,
isDisabled: false
}
},
computed: {
btnText() {
return this.intervalId
? '确定选择'
: `点击随机抽取 ${this.size} 位倒霉蛋`
}
},
methods: {
onBtnClick() {
clearInterval(this.intervalId)
if (this.intervalId) {
this.intervalId = null
this.isDisabled = false
for (let i = 0; i < this.students.length; i++) {
for (let j = 0; j < this.selectedStudentIndexs.length; j++) {
if (this.selectedStudentIndexs[j] == i) {
this.selectedStudentName.push(this.students[i])
}
}
}
this.showName = true
} else {
if (this.size > 10) {
alert('不能同时抽10个以上倒霉蛋，给点面子')
this.size = 1
return
}
this.intervalId = setInterval(() => {
this.selectedStudentName = []
this.selectedStudentIndexs = this.studentIndexs
.sort(() => 0.5 - Math.random())
.slice(0, this.size)
}, 100)
this.isDisabled = true
this.showName = false
}
}
},
created() {
this.studentIndexs = this.students.map((v, i) => i)
this.students.sort(() => 0.5 - Math.random())
}
})
</script>
</body>
</html>