最近,公司有活动需要做一个HTML5版简单的抽奖程序,大家一听到这个需求感觉很简单,网上也多的是demo,但细细想想还是有许多东西要考虑的!
需求:
1.抽奖程序运作在平板电脑上,无网络,就是简单的HTML5页面,用浏览器直接打开,无需其它的运行环境;
2.设置一二三等奖及参与奖,每个奖项可配置名额,设置抽奖概率,浏览器刷新时,历史的抽奖数据还要存在;
3.能够看到抽奖的统计数据,包括每等奖项多少名额,已抽取了多少名额,还剩多少名额为抽取;
其中的难点有:
1.利用HTML5中的canvas技术设计抽奖页面;(网上有参考,按自己的需求改改就可以)
2.数据的本地持久化存储(只用前端技术-js)(没有看到抽奖demo没有这个功能);
下面先看看截图:
版本1:每个奖项显示的区域弧度相同
<