记录抽奖开发

背景

• 班主任交付一个任务，抽奖，让孩子可以开开心心迎接新的一学期。在班级的大屏幕上，每个孩子上去点一下抽奖。
• 前端vue+bootstrap+sweetAlert
• 后端mysql+apache

算法

• 固定奖品数量，固定抽奖人数。
• 一等奖10，二等奖15，三等奖26
• 均匀投奖：将奖品平均分成5份，没10份为1组，每组一等奖2，二等奖3，其余是三等奖，保证抽奖的概率。
• 生成奖池（数组）：随机生成数组下标，然后将每个级别奖品放入数组。
• 抽奖：随机生成数组下标，取对应奖池数组中的奖品，并保存至后台数据库
• 每次加载页面，需要计算已经抽取完成的数据（防止重新刷新页面），生成当前的奖池数组。

前端

• 界面采取bootstrap 栅格嵌套布局。
• 抽取动画采用css的animation熟悉，去旋转。

.rotate{
-webkit-animation: anim .6s infinite alternate;
-ms-animation: anim .6s infinite alternate;
animation: anim .6s infinite alternate;
}
@-webkit-keyframes anim {
from { -webkit-transform: rotateY(180deg); }
to { -webkit-transform: rotateY(360deg); }
}
@-ms-keyframes anim {
from { -ms-transform: rotateY(180deg); }
to { -ms-transform: rotateY(360deg); }
}
@keyframes anim {
from { transform: rotateY(180deg); }
to { transform: rotateY(360deg); }
}

效果