紅包生成的模擬器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交互，生成邏輯等)