切西瓜法实现微信抢红包功能

封面

运用切西瓜法和栅栏法实现微信抢红包功能

  • ✅前言
  • ☑️一、需求分析 - 分红包问题
  • 🆙二、实现版本
    • 1. 版本一:切西瓜法
    • 2. 版本二:栅栏法
  • ✳️三、在线Online
  • 🆗四、结束语
  • 🆚往期推荐

✅前言

在现实生活中,非常常见的一个场景莫过于抢红包。节假日长辈发红包,生日时友人发祝福红包,结婚时亲朋好友发喜事红包……无一场景不贯穿着我们生活中的方方面面。

但是呢,很多时候有可能一个红包里面一两百块钱,而我们最后抢了几毛钱,还真是没有对比就没有伤害……(欲哭无泪)

那在下面的文章中呢,我们将来实现一个微信红包相关的分红包功能。一起来了解叭~

☑️一、需求分析 - 分红包问题

假设我们现在要进行发一个红包,这个红包的金额为 100 元,红包数量是 10 个。那么我们要怎么样分配,才能不失公平性呢?

分红包

那么接下来,我们由浅入深的来实现分红包功能

🆙二、实现版本

1. 版本一:切西瓜法

先附上代码:

HTML 代码:

<h2>红包生成器</h2>
<div id="setting"><div><label>红包金额:<input id="amount" value=100.00></input></label></div><div><label>红包数量:<input id="count" value="10"></input></label></div><div><button id="generateBtn">随机生成</button></div>
</div><ul id="result">
</ul>

CSS 代码:

#setting button {margin-top: 10px;
}#result {padding: 0;
}#result li {list-style: none;
}

JS 代码:

function generate(amount, count){let ret = [amount];while(count > 1){//挑选出最大一块进行切分let cake = Math.max(...ret),idx = ret.indexOf(cake),part = 1 + Math.floor((cake / 2) * Math.random()),rest = cake - part;ret.splice(idx, 1, part, rest);count--;}return ret;
}const amountEl = document.getElementById('amount');
const countEl = document.getElementById('count');
const generateBtn = document.getElementById('generateBtn');
const resultEl = document.getElementById('result');generateBtn.onclick = function(){let amount = Math.round(parseFloat(amountEl.value) * 100);let count = parseInt(countEl.value);let output = [];if(isNaN(amount) || isNaN(count) || amount <= 0 || count <= 0){output.push('输入格式不正确!');}else if(amount < count){output.push('钱不够分')}else{output.push(...generate(amount, count));output = output.map(m => (m / 100).toFixed(2));}resultEl.innerHTML = '<li>' + output.join('</li><li>') +'</li>';
}

一般来说,如果我们直接采取随机的方式来分红包,那边有很大的可能会造成第一个直接99块钱,而其他就有可能出现分不下去的问题。所以,我们应该来处理这个问题。

那在上面的这个算法中呢,俗称切西瓜算法

切西瓜

我们每次都把这个金额分成两部分,那么它总是会有大的一部分和小的一部分,那么这时候呢,我们挑选大的那部分再进行切分,切分完,我们就有三部分了。

继续,我们从这三部分中把最大的那部分再继续进行切分,以此类推。这样的话,我们就会一直有的分,而不会出现没得分的情况。

2. 版本二:栅栏法

先附上代码:

HTML 代码:

<h2>红包生成器</h2>
<div id="setting"><div><label>红包金额:<input id="amount" value=100.00></input></label></div><div><label>红包数量:<input id="count" value="10"></input></label></div><div><button id="generateBtn">随机生成</button></div>
</div><ul id="result">
</ul>

CSS 代码:

#setting button {margin-top: 10px;
}#result {padding: 0;
}#result li {list-style: none;
}

JS 代码:

function * draw(cards){const c = [...cards];for(let i = c.length; i > 0; i--) {const pIdx = Math.floor(Math.random() * i);[c[pIdx], c[i - 1]] = [c[i - 1], c[pIdx]];yield c[i - 1];}
}function generate(amount, count){if(count <= 1) return [amount];const cards = Array(amount - 1).fill(0).map((_, i) => i + 1);const pick = draw(cards);const result = [];for(let i = 0; i < count; i++) {result.push(pick.next().value);}result.sort((a, b) => a - b);for(let i = count - 1; i > 0; i--) {result[i] = result[i] - result[i - 1];}return result;
}const amountEl = document.getElementById('amount');
const countEl = document.getElementById('count');
const generateBtn = document.getElementById('generateBtn');
const resultEl = document.getElementById('result');generateBtn.onclick = function(){let amount = Math.round(parseFloat(amountEl.value) * 100);let count = parseInt(countEl.value);let output = [];if(isNaN(amount) || isNaN(count) || amount <= 0 || count <= 0){output.push('输入格式不正确!');}else if(amount < count){output.push('钱不够分')}else{output.push(...generate(amount, count));output = output.map(m => (m / 100).toFixed(2));}resultEl.innerHTML = '<li>' + output.join('</li><li>') +'</li>';
}

另外一种算法呢,我们可以把它称为是栅栏算法

栅栏法

假设说现在有 100 块钱,那么我们可以把它看成是一个竹子。那如果你要把它分为 10 份的话,你要在中间的段里面去切 9 刀,那这9刀要切在什么位置呢,都是随机的。如果要在 100 块钱里面切 9 刀的话,那它是有 9999 种方案去切。也就是说,它有多少分钱,那么他就有 多少份钱 - 1 种的方式去切。

最后,我们来看一下效果。如下图所示:

随机红包效果

✳️三、在线Online

以上两 个版本的在线地址:

  • 版本一:切西瓜法
  • 版本二:栅栏法

🆗四、结束语

在上面的文章中,我们首先谈论了分红包问题的随机性,同时,用了切西瓜法栅栏法来实现了分红包功能。不知道大家对分红包问题是否有了进一步了解呢?

如果您觉得这篇文章有帮助到您的的话不妨点赞支持一下哟~~😉

🆚往期推荐

👉紧跟月影大佬的步伐,一起来学习如何写好JS(上)

👉紧跟月影大佬的步伐,一起来学习如何写好JS(下)

👉每天都在红绿灯前面梭行,不如自己来实现个红绿灯?

👉幂等问题 vs 如何判断是否是4的幂

👉如何给扑克洗牌才能更公平?

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/307861.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何给扑克洗牌才能更公平?

如何给扑克牌洗牌才能更显公平性&#x1f4fb;前言一、&#x1f399;️需求分析 - 洗牌问题二、&#x1f4bf;实现版本1. 版本一&#xff1a;常规思维2. 版本二&#xff1a;验证公平性3. 版本三&#xff1a;交换法则三、&#x1f4fa;在线Online四、&#x1f4f9;结束语&#x…

这些年我是怎么自学成架构师的(转自知乎)

近日在知乎上一则关于程序员能否“自学成才”的问题&#xff0c;引发了激烈的讨论&#xff01;各种各样的说法都有&#xff0c;最终变成程序员晒学习经历的帖子。作为十多年.NET技术老兵&#xff0c;纯自学成架构师&#xff0c;也来分享下观点&#xff1a;自学当然有效&#xf…

创新视角下的复盘 | 2021/08/01-2021/09/30

&#x1f5c2;️序言 七月份的时候第一次做月度复盘&#xff0c;发现如果只有每日计划&#xff0c;还是比较零散的。月度复盘可以更直观地看到自己的时间规划和及时纠正当下存在的一些问题。 在8-9月份中&#xff0c;有一半在暑假&#xff0c;一半开始于新学期。 &#x1f4…

TIOBE 9 月榜单:C#上涨1.18,Java 同比下滑3.18

喜欢就关注我们吧&#xff01;TIOBE 已公布 2020 年 9 月的编程语言排行榜。C 近期发展状态不错&#xff0c;依旧在榜单中排第四&#xff0c;但排名比率保持增长&#xff0c;本月为 7.11%。2003 年是 C 的巅峰时期&#xff0c;当年 8 月&#xff0c;它的 TIOBE 排名峰值为 17.5…

储存引擎InnoDB 索引选择 为何是B+树 而不是 B树 哈希表

一:概述 首先需要澄清的一点是&#xff0c;MySQL 跟 B 树没有直接的关系&#xff0c;真正与 B 树有关系的是 MySQL 的默认存储引擎 InnoDB&#xff0c;MySQL 中存储引擎的主要作用是负责数据的存储和提取&#xff0c;除了 InnoDB 之外&#xff0c;MySQL 中也支持 MyISAM 作为表…

初探react,用react实现一个todoList功能

初探react&#xff0c;用react实现一个todoList功能&#x1f6f0;️前言&#x1f680;一、react基础1. react简介2. 开发环境搭建3. 工程目录文件简介4. react中最基础的JSX语法&#x1f6f8;二、使用react编写TodoList功能1. 页面构思2. React中的响应式设计思想和事件绑定3. …

《五分钟商学院》个人篇学习总结(上)

【商业知识】| 作者 / Edison Zhou这是EdisonTalk的第285篇原创内容商业篇聚焦的是我们与外部的关系&#xff0c;管理篇聚焦的是我们与内部的关系&#xff0c;而个人篇聚焦的则是我们与自己的关系。与自己斗&#xff0c;其乐无穷&#xff0c;本文是个人篇的上半部分学习总结。本…

Git 实用操作 | 撤销 Commit 提交

有的时候&#xff0c;改完代码提交 commit 后发现写得实在太烂了&#xff0c;连自己的都看不下去&#xff0c;与其修改它还不如丢弃重写。怎么操作呢&#xff1f;使用 reset 撤销如果是最近提交的 commit 要丢弃重写可以用 reset 来操作。比如你刚写了一个 commit&#xff1a;写…

react只停留在表层?五大知识点带你梳理进阶知识

五大知识点带你梳理react进阶知识✉️前言&#x1f4e7;一、props1、PropTypes与DefaultProps应用&#xff08;1&#xff09;PropTypes&#xff08;2&#xff09;defaultProps2、props&#xff0c;state与render函数&#x1f4e8;二、React中的虚拟DOM1、什么是虚拟DOM&#xf…

解决 WPF 绑定集合后数据变动界面却不更新的问题

解决 WPF 绑定集合后数据变动界面却不更新的问题独立观察员 2020 年 9 月 9 日在 .NET Core 3.1 的 WPF 程序中打算用 ListBox 绑定显示一个集合&#xff08;满足需求即可&#xff0c;无所谓什么类型的集合&#xff09;&#xff0c;以下是 Xaml 代码&#xff08;瞟一眼就行&…

「offer来了」面试中必考的15个html知识点

「面试专栏」前端面试之html篇⚡序言⭐一、题集内容抢先看&#x1f320;二、规范相关1、你如何理解HTML结构的语义化2、浏览器是怎么对 Html5 的离线储存资源进行管理和加载的呢3、HTML W3C的标准4、Doctype作用? 严格模式与混杂模式如何区分&#xff1f;它们有何意义?5、vie…

leetcode700. 二叉搜索树中的搜索

一:题目 二:上码 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(nullptr) {}* TreeNode(int x) : val(x), left(nullptr), right(nullptr) {}*…

「offer来了」1张思维导图,6大知识板块,带你梳理面试中CSS的知识点!

「面试专栏」前端面试之css篇⌛序言✏️一、CSS框架先梳理&#x1f58c;️二、基础样式问题1、请你讲一讲css的权重和优先级&#xff08;1&#xff09;权重&#xff08;2&#xff09;优先级2、说一下CSS的position属性3、span 标签是否可以设置宽高&#xff0c; margin 和 padd…

动态代理的理解

一:动态代理和静态代理的区别 静态代理&#xff1a;了解设计模式中的代理模式的童鞋应该都知道&#xff0c;如果想要生成代理类&#xff0c;需要让代理类和被代理类实现同一个接口&#xff0c;并且在代理类中添加被代理类的引用&#xff0c;代理类方法实现中添加代理逻辑&…

.NET Core 下的爬虫利器

爬虫大家或多或少的都应该接触过的&#xff0c;爬虫有风险&#xff0c;抓数需谨慎。本着研究学习的目的&#xff0c;记录一下在 .NET Core 下抓取数据的实际案例。爬虫代码一般具有时效性&#xff0c;当我们的目标发生改版升级&#xff0c;规则转换后我们写的爬虫代码就会失效&…

Redux从入门到进阶,看这一篇就够了!

Redux&#xff0c;带你从入门到进阶&#x1f302;序言☂️一、基础知识1、Redux概念简述2、Redux的工作流程&#x1f383;二、使用Antd实现TodoList页面布局1、在项目中使用Antd2、使用Antd实现TodoList的基本布局3、创建redux中的store&#xff08;1&#xff09;创建store&…

ASP.NET Core 3.x控制IHostedService启动顺序浅探

想写好中间件&#xff0c;这是基础。一、前言今天这个内容&#xff0c;基于于ASP.NET Core 3.x。从3.x开始&#xff0c;ASP.NET Core使用了通用主机模式。它将WebHostBuilder放到了通用的IHost之上&#xff0c;这样可以确保Kestrel可以运行在IHostedService中。我们今天就来研究…

com.mysql.cj.exceptions.InvalidConnectionAttributeException

一:java连接数据库报错 com.mysql.cj.exceptions.InvalidConnectionAttributeException 二:报错原因 MySQL jdbc 6.0 版本以上必须配置“serverTimezone”参数 UTC代表的是全球标准时间 若我们使用的时间是北京时区也就是东八区&#xff0c;领先UTC八个小时。url的时区使用…

Istio Pilot 源码分析(一)

张海东&#xff0c; ‍多点生活&#xff08;成都&#xff09;云原生开发工程师。Istio 作为目前 Servic Mesh 方案中的翘楚&#xff0c;吸引着越来越多的企业及开发者。越来越多的团队想将其应用于微服务的治理&#xff0c;但在实际落地时却因为不了解 Istio 黑盒中的运行机制而…

结营啦!有缘相聚于青训,未来高处见呀~~

&#x1f4f8;叮&#xff01; 记 字节跳动第一届青训营顺利结营啦&#xff01; 从8月份的青训营&#xff0c;到9月份的实训营&#xff0c;搁置了许久的结营心得终于拾起来辽&#xff01; &#x1f3ac;开营进行时 从答疑会开始&#xff0c;负责人仔细的阐述了本次训练营的…