flex布局中flex属性运用在随机发红包的算法上

flex布局是现在前端基本上都会运用的一种布局，基本上用到比较多的是父元素设置display：flex，两个子元素，一个设置固定宽度，另一个设置为flex：1（这里都指flex-direction为row），flex属性其实是：flex-grow，flex-shrink以及flex-basis三个属性的简写，详细的这里不做多的说明，这里主要说一下flex-shrink，这个值指所有的子元素如果宽度之和大于父元素，则根据所占比例去各自减少各自应该减少的部分，比如说父元素宽度为200px，有两个子元素A，B，宽度都设为了200px，flex-shrink值分别设为2,3，此时A,B加起来宽度为400px，超出了父元素的宽度，此时A，B的实际宽度为别为：200 -（400 - 200）* 2/5 = 120px，200 -（400 - 200）* 3/5 = 80px。

根据比例减少这个，可以让我们运用到一些算法上，例如固定金额随机发固定数量的红包，具体的算法思想就是，随机生成0~1的小数，先算出随机金额，然后将所有比例相加，得到一个总的比例，这里可能小于1也可能大于1，如果小于1，则根据比例所占的总比例去相应的减少或增加。具体的代码附上：

function randMoney(total, num) {

const perMoney = []; // 最终随机金额

const perScale = []; // 随机比例

if (num === 1) {

perMoney.push(total);

} else {

for (let i = 0; i < num; i++) {

let randRatio = Math.random();

if (randRatio === 0) { // 这里如果得出比例等于0则要重新随机所以直接i--，当然这里也可以用while循环

i--;

} else {

perScale.push(randRatio);

}

// 得到总比例

const totalScale = perScale.reduce((pre, item) => {

return Number(pre) + Number(item);

});

let changeMoney = totalScale > 1 ? total * (totalScale - 1) : total * (1 - totalScale); // 超出或不足的金额值

perScale.forEach((item) => {

let originMoney = total * item; // 根据最初的比例得到的金额

let changeMoneyItem = changeMoney * (item / totalScale); // 差值金额

let itemMoney = totalScale > 1 ? originMoney - changeMoneyItem : originMoney + changeMoneyItem; // 得到最终的按比例计算过的金额

perMoney.push(itemMoney.toFixed(2));

});

}

console.log(`${total}随机分为${num}个红包，金额分别是：${perMoney.toString()}`);

}

巴特西

flex布局中flex属性运用在随机发红包的算法上

最新文章

热门文章