抢红包啦

介绍

小蓝想给同学们发一个红包，慰劳大家学习前端的辛苦，可是到了开红包这一步，大家收到的红包金额列表竟然一片空白，这可急坏了小蓝，快来帮小蓝解决这个问题吧！

准备

开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：

1
2
3
4
5
6
7
├── css
├── effect.gif
├── images
├── index.html
└── js
    ├── index.js
    └── randomAllocation.js

其中：

  • index.html 是主页面。
  • images 是图片文件夹。
  • css 是样式文件夹。
  • js/index.js 是项目的 js 文件。
  • js/randomAllocation.js 是需要补充代码的 js 文件。
  • effect.gif 是项目完成的效果图。

注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载：

1
wget https://labfile.oss.aliyuncs.com/courses/18421/red_envelope.zip && unzip red_envelope.zip && rm red_envelope.zip

在浏览器中预览 index.html 页面效果如下：

初始效果

目标

目前存在的问题是：输入金额和红包个数，点击开红包后原本需要展示的红包金额列表出现一片空白。请实现 js/randomAllocation.js 文件中 randomAllocation 函数，修复此问题。

randomAllocation 函数共接收二个参数，参数 total 为红包总金额，参数 n 为红包个数。抽取到的红包的最小金额为 0.01 元，且最多保留两位小数。每次发放红包的个数为 n，每个红包的金额随机，最终将本次抽取的所有红包金额组成数组返回。需要注意的是，要确保 n 个红包的金额加起来必须等于总金额 total。

1
2
3
4
5
// 例：总金额为 100 元的 10 个红包，函数的返回结果可能如下：
// 示例 1
[23.34, 71.1, 4.97, 0.28, 0.26, 0.01, 0.01, 0.01, 0.01, 0.01]
// 示例 2
[60.81, 15.26, 12.68, 6.75, 2.66, 0.06, 1.16, 0.3, 0.12, 0.2]

完成后效果如下：

最终效果

规定

  • 请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径、class 名、id 名、图片名等，以免造成无法判题通过。
  • 满足需求后，保持 Web 服务处于可以正常访问状态，点击「提交检测」系统会自动检测。

判分标准

  • 本题完全实现题目目标得满分，否则得 0 分。

总通过次数: 31 | 总提交次数: 34 | 通过率: 91.2%

难度: 中等 标签: 蓝桥杯, 2023, 国赛, Web 前端, JavaScript, JS 函数封装

题解

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/**
 * @param {*} total 红包总金额
 * @param {*} n 红包个数
 * @return {*} Array  存放红包金额的数组
 */
function randomAllocation(total, n) {
  // 要求：n个，sum和加起来必须是total
  let result = [];
  let remaining = total;
  for (let i = 1; i < n; i++) {
      let random
      /**
       * parseFloat：如果出现5.20，忽略最后一个0，即变成1位
       * (Math.random() * ((remaining - (n - i) * 0.01) - 0.01) + 0.01)
       * 形如(Math.random() * (max - min) + min
       * 用于生成范围数字
       * min = 0.01 很好理解
       * max = (remaining - (n - i) * 0.01) 剩余的remaining，减去等待分配的每个最小
       */
      random = parseFloat((Math.random() * ((remaining - (n - i) * 0.01) - 0.01) + 0.01).toFixed(2))
      result.push(random)
      remaining -= random // remaining的精度差异不超过0.001，所以转换一下，使用Math.round
      remaining = Math.round(remaining * 1000) / 1000; // 四舍五入处理三位，精度就没问题
      console.log(random, remaining);
  }
  console.log(remaining);
  result.push(remaining);
  return result;
}