一个抽奖类型单页面应用
2018-07-11 本文已影响4人
89089答复
具体的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>RAFFLE</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<style type="text/css">
body {
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div id="app">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="jumbotron">
<h1 class="display-4">抽奖活动</h1>
<p class="lead">庆祝公司上市.</p>
<p class="lead">
<!-- 开始抽奖的方法按钮 -->
<button class="btn btn-primary btn-lg" v-on:click="startRaffle()">抽奖</button>
<!-- 结束抽奖的方法按钮 -->
<button class="btn btn-primary btn-lg" v-on:click="stopRaffle()">开奖</button>
<hr/>
<strong>操作指南：</strong>
<ul>
<li>第一步点击抽奖按钮</li>
<li>第二步点击开奖按钮，下方幸运儿栏目会自动弹出抽中者</li>
<li>下次再抽奖仍然是点击抽奖按钮循环上述两步</li>
<li>如果不小心连续点击抽奖按钮不影响公平结果</li>
<li>如果不小心连续点击开奖按钮会弹出同一个幸运儿，可刷新重置，不刷新不影响下次抽奖公平性</li>
</ul>
</p>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header">
幸运儿
</div>
<div class="card-body">
<ul>
<!-- 展示幸运观众 -->
<ol v-for="luckyUser in luckyUsers">{{ luckyUser.name }}</ol>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
//使用for循环造出用于抽奖的用户，
var users = function () {
let users = [];
for (let i = 0; i < 100; i++) {
users.push({ id: i + 1, name: "name " + (i + 1) })
}
return users;
}();
new Vue({
el: "#app",
data: {
users: users,//自己造的所有的用于抽奖的用户
stopAction: false,//三个方法的共同属性，用于控制动作的开和关
luckyUserNumber: 0,//搜集循环中对应的循环执行停止的次数
luckyUsers: [],//搜集执行停止时对应的幸运儿对象
},
methods: {
//执行循环的方法，功能：执行抽奖循环同时
//通过循环执行raffle来得到循环的luckyUserNumber
raffle: function () {
if (!this.stopAction) {
return;
};
console.log('raffle');
//this.users.length的值是100，这样this.luckyUserNumber
//的最小值变成了0，最大值就是99;
//这样users中的每一个对象就都可以遍历到
if (this.luckyUserNumber >= this.users.length - 1) {
this.luckyUserNumber = 0;
}
this.luckyUserNumber += 1;
setTimeout(() => {
this.raffle();
}, 1);
},
//开始抽奖的按钮对应的执行方法
//功能：启动执行循环的方法
startRaffle: function () {
console.log('startRaffle');
this.stopAction = true;
this.raffle();
},
//开奖按钮对应的执行方法，功能：暂停执行循环同时
//抛出开奖当时对应的幸运儿
stopRaffle: function () {
console.log('stopRaffle');
console.log(this.luckyUserNumber);
this.luckyUsers.push(this.users[this.luckyUserNumber]);
this.stopAction = false;
}
}
})
</script>
</html>
