马上年会了部门组织抽奖活动，说让写个抽奖小程序
界面效果如下：
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>年尾抽奖</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<style>
body{background: url(images/bg.jpg) no-repeat 100%;height: 100vh;}
.container{padding-top:130px}
.leftwrapper{float:left;width:25%;height: 300px;background-color: #fff;}
.leftwrapper textarea{height:255px;width:100%;border: 0px;padding: 0px;margin: 0px;}
.centerwrapper{float:left;width:50%;height: 300px;text-align: center;color:red;}
.centerwrapper input{width:100px;height:30px;line-height: 30px;}
.rightwrapper{float:left;width:25%;height: 300px;background-color: #fbca0e;}
.showUser{width:300px;line-height:150px;height:150px;background-color: brown;text-align: center;font-size: 50px;margin:20px auto;font-weight: bold;}
</style>
</head>
<body>
<div id="root" class="container">
<div class="leftwrapper">
参与抽奖人数：{{users.length}}<br/>
<input type="button" value="加载抽奖用户" @click="doLoadUser" /><br/>
<textarea v-model="usersStr"></textarea>
</div>
<div class="centerwrapper">
<div class="showUser" >{{showUser}}</div>
<input type="button" value="开始" @click="doStart" />
<input type="button" value="结束" @click="doStop" /><br/>
</div>
<div class="rightwrapper">
已获奖人员
<div>
<ul v-for="(item,i) in showedUsers">
<li>{{item}}</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
var vm = new Vue({
el:"#root",
data:{
usersStr:'',
users:['张三','李四','王五','二麻子','三钉子'],
showedUsers:[],
showUser:'张三',
timer:null
},
methods:{
doLoadUser:function(){
this.users = this.usersStr.split('\n');
},
doStart:function(){
clearInterval(this.timer);
this.timer = setInterval(this.doChange,46); //随机数据变换速度，越小变换的越快
},
doChange:function(){
this.showUser = this.users[this.GetRnd(0,this.users.length -1)];
},
doStop:function(){
clearInterval(this.timer);
this.showedUsers.push(this.showUser);
//将已获奖人员转移到已获奖集合不再参与抽奖
var showIndex = this.users.indexOf(this.showUser);
this.users.splice(showIndex,1);
},
GetRnd:function(min,max){
return parseInt(Math.random()*(max-min+1));
}
}
});
</script>
</body>
</html>
