红包生成的模拟器2018今日头条秋招

题目描述

设计一个红包生成的模拟器，要求实现以下功能设计：

图一: 开始页面

 

图二: 生成过程页面

 

图三: 结果页面

 

图四: 总体效果(动态)

图五: 头像素材地址：

http://s3a.pstatp.com/cg_growth/resource/boilerplate/images/redpacket/avatar.png

 

设计需求

1. 页面上支持自定义红包输入的个数和金额，数值类型不能为空且必须大于1，效果如图一所示

2. 点击发送红包按钮，能够进入红包生成的loading页面，效果如图二所示，模态框的宽高为300*450px，垂直居中页面，包含必要的头像和文案，拆红包按钮能够围绕中轴线作旋转动画

3. 点击拆红包按钮后，会有一个向上的开红包的动画，根据前面输入的个数和金额生成红包获取列表，红包生成规则见附注。

4. 金额最高的做为“手气最佳”进行标注，见图三中的领取榜单所示

5. 从生成的红包列表中随机取出一个值做为你抢到的红包值，见图三中头像下的数字所示

6. 点击右上角的关闭按钮，能够关闭弹框，同时清空领取榜单里的记录，方便下次从新生成

 

红包生成规则

1. 红包的数值是随机的，而且数值的分布近似于正态分布。

2. 全部人都能分到红包，不会出现红包数值为0的状况，额度在0.01和(剩余平均值*2)之间。

3. 全部人的红包数值加起来等于支付的金额

4. 总体效果参考动态图，能够根据自身能力的状况侧重完成所擅长的环节(css页面，js交互，生成逻辑等)