vue寫的前端抽獎（唯一 ，排他，抽中後刪除），出現抽空（在還有名單可抽的情況下，沒有抽中任何人）的bug。
源碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>抽獎</title>
<!-- 開發環境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
body {
width:100%;
height:100%;
font-size: 15px;
overflow: hidden;
-webkit-overflow: hidden !important;
-webkit-margin-top:0 !important;
-webkit-margin-bottom:0 !important;
-webkit-margin-right:0 !important;
-webkit-margin-left:0 !important;
-webkit-padding:0 !important;
background:#e4393c;
color:#faca78;
}
#draw{
width:100%;
margin:0 auto;
text-align: center;
margin-top:20em;
}
div.wrapper{
width:79em;
display: flex;
border:1px dashed #faca78;
margin:0 auto;
text-align: center;
padding:1.5em;
}
div.gongxi{
width:4em;
font-size: 8em;
}
div.nameBox{
width:4em;
font-size: 8em;
text-align: center;
border:1px dashed #faca78;
margin-right:0.5em;
}
div.button {
text-align: center;
}
div.button button{
display: block;
margin-top:2em;
}
.btn {
font-size:1em;
width: 6.5em;
padding: 0.5em;
position: relative;
font-family: 'Open Sans', sans-serif;
text-decoration: none;
background-image: linear-gradient(bottom, #faca78 0%, #f9c977 100%);
background-image: -webkit-gradient(linear,
left bottom,
left top,
color-stop(0, #faca78),
color-stop(1, #f9c977));
box-shadow: inset 0px 1px 0px #fcfbcd, 0px 6px 0px #e0a059;
border-radius: 5px;
}
.btn::before {
background-color: #e0a059;
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
padding-left: 2px;
padding-right: 2px;
padding-bottom: 4px;
left: -2px;
top: 5px;
z-index: -1;
-webkit-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0px 1px 0px #fff;
box-shadow: 0px 1px 0px #fff;
}
.btn:active {
color: #e0a059;
text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.3);
background: #faca78;
-webkit-box-shadow: inset 0px 1px 0px #fcfbcd, inset 0px -1px 0px #e0a059;
box-shadow: inset 0px 1px 0px #fcfbcd, inset 0px -1px 0px #e0a059;
top: 7px;
outline: none;
-webkit-appearance: none;
}
.btn:focus {
outline: none;
-webkit-appearance: none;
}
.btn:active::before {
top: -2px;
}
.disabledBtn{
background:#ccc;
background-image: linear-gradient(bottom, #ccc 0%, #999 100%);
background-image: -webkit-gradient(linear,
left bottom,
left top,
color-stop(0, #ccc),
color-stop(1, #999));
box-shadow: inset 0px 1px 0px #ccc, 0px 6px 0px #999;
}
</style>
</head>
<body>
<div id="draw">
<div class="wrapper">
<div class="gongxi">恭喜：</div>
<div class="nameBox">{{result}}</div>
<div class="button">
<button class="btn" :class="{'disabledBtn':isStartBtnDisable}" @click="goDraw" :disabled="isStartBtnDisable">{{buttonText}}</button>
<button class="btn" :class="{'disabledBtn':isStopBtnDisable}" @click="stopDraw" :disabled="isStopBtnDisable">Stop</button>
</div>
</div>
</div>
<script>
// console.log("innerheight " + window.innerHeight)
// console.log("innerheight " + window.innerWidth)
new Vue({
el: "#draw",
data: {
isStartBtnDisable:false,
isStopBtnDisable:true,
buttonText: "Start",
result: "Nobody",
nowIndex:0,
namesList: [
"趙一",
"錢二",
"孫三",
"李四",
"週五",
"吳六",
"鄭七",
"王八",
"馮九",
"陳十",
"褚十一",
"衛十二",
"蔣十三",
"沈十四",
"韓十五",
"楊十六",
"朱十七",
"秦十八",
"尤十九",
"許二十"
]
},
methods: {
createTimer:function(){
timer1=setInterval(this.timer, 20);
},
goDraw:function(){
this.buttonText="Drawing"
this.isStartBtnDisable=true
this.isStopBtnDisable=false
this.createTimer()
},
stopDraw:function(){
clearInterval(timer1)
this.refreshPage()
//將抽到的人的姓名從名單表中移出
this.namesList.splice(this.nowIndex, 1);
console.log(this.namesList)
},
timer:function(){
this.nowIndex ++
if(this.nowIndex > this.namesList.length){
this.nowIndex = 0
}
this.result=this.namesList[this.nowIndex]
},
refreshPage:function(){
this.buttonText="Start"
this.isStartBtnDisable=false
this.isStopBtnDisable=true
}
}
})
</script>
</body>
</html>
找到錯誤原因：nowIndex的值超出數組邊界。
timer:function(){
this.nowIndex ++
//錯誤原因：數組下標的最大值是數組長度-1，而不是數組長度本身。
if(this.nowIndex > this.namesList.length-1){
this.nowIndex = 0
}
this.result=this.namesList[this.nowIndex]
}