当前位置: 首页 > Web前端 > vue.js

记录抽奖发展

时间:2023-03-31 16:19:56 vue.js

背景班主任布置了抽奖的任务,让孩子们愉快的迎接新学期。班里的大屏幕上,每个孩子都上去点击抽奖。前端vue+bootstrap+sweetAlert后端mysql+apache算法固定奖品数量和抽奖数量。一等奖10名,二等奖15名,三等奖26名。平票:奖品平分5份,每10份为一组。每组设一等奖2名,二等奖3名,其余为三等奖。保证中奖几率。生成奖池(数组):随机生成数组下标,然后将每一关的奖品放入数组中。抽奖:随机生成数组下标,获取对应奖池数组中的奖品,保存到后台数据库中。每次加载页面,都需要计算已经抽取的数据(防止页面被刷新),生成当前奖池数组。前端界面采用bootstrap网格嵌套布局。提取动画就是熟悉的css动画,要旋转。.rotate{-webkit-animation:anim.6s无限交替;-ms-animation:anim.6s无限交替;动画:anim.6s无限交替;}@-webkit-keyframesanim{from{-webkit-transform:rotateY(180度);}to{-webkit-transform:rotateY(360deg);}}@-ms-keyframesanim{from{-ms-transform:rotateY(180deg);}to{-ms-transform:rotateY(360deg);}}@keyframesanim{from{transform:rotateY(180deg);}到{变换:旋转Y(360deg);}}影响