版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
从本章开始，将用四章的篇幅，记录一次从前台的用户前端抽奖，抽奖结果的表单提交，数据库存储抽奖结果到后台的管理员管理抽奖结果这样一个抽奖平台开发的全过程，梳理前后端之间数据交互所需步骤及实现方法，明晰前台后台开发差异。
值得注意的是，前端后端是从用户可视化角度而言的，与用户直接交互的部分属于前端，反之属于后端；与前后端概念不同的是前台和后台，前台指的是面向用户的平台，后台指的是面向运营人员的用于管理数据的平台，前台和后台一般而言都包含一套完整的前后端，在此予以明晰，以便后续的阅读理解。
一、抽奖界面的搭建（HTML + CSS）
这里我搭建了一个九宫格抽奖界面：
1. HTML部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>抽奖</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body >
<div class="game" >
<div class="turntable"style="position: absolute;left: 50%;transform:translateX(-50%)" >
<div class="gift">1号礼物</div>
<div class="gift">随机金额红包</div>
<div class="gift">8号礼物</div>
<div class="gift">2号礼物</div>
<div class="gift"></div>
<div class="gift">6号礼物</div>
<div class="gift">3号礼物</div>
<div class="gift">4号礼物</div>
<div class="gift">5号礼物</div>
<button type="button" class="start" onclick="start()">我要礼物</button>
</div>
</div>
</body>
</html>
2. CSS部分：
<style>
.game{
width: 100%;
height: 320px;
text-align: center;
margin-top: 0 auto;
}
.turntable{
width: 310px;
height: 320px;
margin-top: 0 auto;
}
.gift{
width: 100px;
height: 100px;
border: 1px solid yellowgreen;
float: left;
font-size: 14px;
font-weight: bold;
text-align: center;
line-height: 100px;
background-color: azure;
color: cadetblue;
}
.gift:nth-child(5){
background-color: transparent;
}
.start{
width: 80%;
display: inline-block;
margin-top: 15px;
margin-bottom: 10px;
vertical-align: middle;
color: rgb(255, 255, 255);
background-color: rgb(233, 104, 107);
text-align: center;
cursor: pointer;
white-space: nowrap;
box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 6px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
font-family: 微软雅黑;
border-width: initial;
border-style: none;
border-color: initial;
border-image: initial;
outline: 0px;
padding: 8px 18px;
overflow: hidden;
text-decoration: none;
transition: all 0.2s ease-out 0s;
border-radius: 2px;
}
.selected{
border:1px solid transparent;
box-shadow: 0 0 5px 2px red;
position:relative;
background-color: antiquewhite;
}
</style>
二、抽奖功能的实现（JavaScript + jQuery）
前端实现抽奖功能的设计思路：
-
在HTML中点击抽奖按钮，调用
start()函数，触发抽奖功能。 -
使用
position变量给每一个抽奖格标号同时确定抽奖特效滚动顺序。 -
抽奖列表及概率（
ArrList）确定后需要结果的（真/伪）随机性，因此定义一个getArrayItems函数用于随机取数。 -
奖品列表有“随机金额红包”选项，
gift:eq('+ position[(x%8)]）定位红包选项，执行其对应函数。 -
在确定 “随机金额红包”可选金额（
money）后，定义randmoney函数随机抓取红包金额。
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
var gift;
var x=0;
//可修改ArrList以定义每一奖项中奖概率;
var ArrList=[20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35];
//position用于定位每一个抽奖格;
var position=[0,1,2,5,8,7,6,3];
var money=[1.88,5.20,6.66,8.88,13.14,66.66,88.88,99.99,100];
function start(){
var initial=getArrayItems(ArrList,1);
for (var i = 0; i < initial; i++) {
setTimeout(()=>{
$('.gift').removeClass("selected");
gift=$('.gift:eq('+ position[(x%8)] +')');
gift.addClass('selected');
x++;
if (x==initial) {setTimeout(()=>{
if (position[(x%8)]==2) {
randmoney();
}else{
alert('恭喜获得礼物：'+gift.text());
}
console.log(position[(x%8)]);
x=0;
},10)}
},i*150);
}
}
function randmoney(){
for (var i = 0; i < 15; i++) {
setTimeout(()=>{
$('.gift:eq(1)').text(getArrayItems(money,1));
x++;
if (x==15) {x=0;setTimeout(()=>{
console.log($('.gift:eq(1)').text()+"元");
alert('恭喜获得红包：'+$('.gift:eq(1)').text()+"元");
$('.gift:eq(1)').text('随机金额红包');
},1)}
},i*100);
};
}
function getArrayItems(arr, num) {
//新建一个数组,将传入的数组复制过来,用于运算,而不要直接操作传入的数组;
var temp_array = new Array();
for (var index in arr) {
temp_array.push(arr[index]);
}
//取出的数值项,保存在此数组
var return_array = new Array();
for (var i = 0; i<num; i++) {
//判断如果数组还有可以取出的元素,以防下标越界
if (temp_array.length>0) {
//在数组中产生一个随机索引
var arrIndex = Math.floor(Math.random()*temp_array.length);
//将此随机索引的对应的数组元素值复制出来
return_array[i] = temp_array[arrIndex];
//然后删掉此索引的数组元素,这时候temp_array变为新的数组
temp_array.splice(arrIndex, 1);
} else {
//数组中数据项取完后,退出循环,比如数组本来只有10项,但要求取出20项.
break;
}
}
return return_array;
}
</script>
自此我们完成了抽奖平台开发中抽奖功能的前端实现。下一步需要解决的问题是如何将抽奖结果通过表单的方式提交至后端。
在这里需要强调的是，关于抽奖结果直接由前端生成显然存在一定的安全隐患，一般而言中奖逻辑以及库存计算等问题应该全部由后端负责，前端仅仅负责动画的实现（如通过ajax请求返回最终位置或者已提前确定最终位置），这一章的写作仅仅是为了解答粉丝关于前端如何快速实现抽奖功能的疑问，适合运用于现场抽奖情境，如有安全需求，可以按照我上面的思路进行改进，特此说明。
后期内容提要：
- 【抽奖平台开发（2）】抽奖结果的表单提交，实现Web前后端的数据交互（HTML+JS+PHP）
- 【抽奖平台开发（3）】将抽奖结果提交的表单上传至数据库，完成抽奖平台前台开发（PHP+MySQL）
- 【抽奖平台开发（4）】基于MVC模式实现数据后台管理操作的可视化（PHP+HTML+MySQL）
如果您有任何疑问或者好的建议，期待你的留言与评论！