【抽奖平台开发（1）】抽奖功能的前端实现（HTML+JS+CSS）

从本章开始，将用四章的篇幅，记录一次从前台的用户前端抽奖，抽奖结果的表单提交，数据库存储抽奖结果到后台的管理员管理抽奖结果这样一个抽奖平台开发的全过程，梳理前后端之间数据交互所需步骤及实现方法，明晰前台后台开发差异。

值得注意的是，前端后端是从用户可视化角度而言的，与用户直接交互的部分属于前端，反之属于后端；与前后端概念不同的是前台和后台，前台指的是面向用户的平台，后台指的是面向运营人员的用于管理数据的平台，前台和后台一般而言都包含一套完整的前后端，在此予以明晰，以便后续的阅读理解。

一、抽奖界面的搭建（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）

如果您有任何疑问或者好的建议，期待你的留言与评论！

【抽奖平台开发（1）】抽奖功能的前端实现（HTML+JS+CSS）相关推荐

微信公众平台开发之商品比价功能
微信公众平台开发之商品比价功能是会员日常生活中最贴心的实用查询工具.商品比价给会员的生活带来极大的方便,也使会员对我们官方微信的依赖度提升一个层面.比价功能让我们官方微信的服务更加周到,信息更加全面, ...
php微信自定义菜单开发,微信公众平台开发自定义菜单功能开发
一.简介微信公众平台服务号以及之前成功申请内测资格的订阅号都具有自定义菜单的功能.开发者可利用该功能为公众账号的会话界面底部增加自定义菜单,用户点击菜单中的选项,可以调出相应的回复信息或网页链接.自 ...
配音App平台开发要有的功能
1.丰富的配音素材配音app上具有丰富的配音素材,用户可以通过平台对素材进行获取,素材种类繁多,既有热门视频素材也有经典作品合集.用户可以在平台内进行查找并快速导入素材进行配音,制作专属个人作品.配 ...
php微信公众点歌台,微信公众平台开发在线点歌功能介绍
微信公众平台的消息接口-音乐消息,这是广大微信公众平台开发者的福音. 根据这一功能,如果能做出在微信中点歌功能,那么我们以后就可以不用安装其他APP, 直接在微信里面关注一个账号,就可以听歌了,还省去 ...
测试平台开发：（14）测试用例管理功能设计
上一篇:测试平台开发:(13)前端登录功能_要开朗的spookypop的博客-CSDN博客先做一个极简的测试用例管理功能,可以满足日常需求,私信我获取完整代码. 主要功能点如下: 根据要实现的功能, ...
微信公众平台开发新手教程(图文具体解释)
因为微信的大热.为了更好的方便使用微信的用户查询一些信息.这篇文章是入门级的微信公众平台开发教程,须要的朋友能够參考下在这篇新手教程中,我们假定你已经有了PHP语言程序.MySQL数据库.计算机网络 ...
微信公众平台开发入门教程
转自:http://www.cnblogs.com/txw1958/p/wechat-tutorial.html 第一章申请服务器资源创建新浪云计算应用申请账号我们使用SAE新浪云计算平台作为 ...
微信公众平台开发教程之新手初级入门攻略附PHP代码实例
在这篇入门教程中,我们假定你已经有了PHP语言程序.MySQL数据库.计算机网络通讯及XML语言基础.如果你还没有,那么请先学习相关知识. 我们将使用微信公众账号豆立方(微信号:BeanCube)作为 ...
微信公众平台开发入门教程（图文）
关键字:微信公众平台开发入门作者:贝创工作室原文: http://www.cnblogs.com/imaker/p/5491433.html 背景知识:微信公众平台的开发需要有一定的PHP基础知识 ...
短视频平台开发，首先要搭建短视频框架
科技发展,技术进步,音视频异军突起.无视频,不网络,短视频成为最重要的信息载体之一,是互联网核心组成部分.如何进行短视频平台开发,是慎之又慎的问题.从架构的角度,探讨短视频平台的构建与技术选型问题.从 ...