红包生成的模拟器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交互,生成逻辑等)

 

转载于:https://my.oschina.net/u/3759656/blog/2243792

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值