js模拟微信抢红包算法的讨论

春节在家无聊,抢红包的时候想起来,不如自己写一个微信抢红包算法来练练手。本以为是非常简单的一个事情,但真正写下来也算是一波三折,不禁感叹,在程序员的路上,我还是太嫩了啊!写这篇文章的原因也是想与广大网友集思广益,获得更好的学习。

基本思路

基本思路很简单,用户可以输入红包个数和红包总金额,然后点击生成按钮,就能生成一组随机数。效果图如下:

《js模拟微信抢红包算法的讨论》 Paste_Image.png

图方便,引入vue的数据绑定,代码如下:

<div id="wrapper">
        随机数个数<input type="text" v-model='num'><br>
        随机数之和<input type="text" v-model='sum'><br>
        <button v-on:click='getRandom'>生成随机数</button>
        <ul>
            <li v-for='item in list'>
                {{item}}
            </li>
        </ul>
    </div>
<script src='node_modules/vue/dist/vue.min.js'></script>
var vi=new Vue({
                el:'#wrapper',
                data:{
                    num:0,
                    sum:0,
                    list:[],
                },
                methods:{
                    getRandom:function(){
                        var app=this
                        var isOk=false
                        while(!isOk){
                            for (var i = app.num-1,sum_2=0,exist=0,list=[]; i >= 0; i--) {
                                list[i]=parseFloat((Math.random()*(parseFloat(app.sum)-exist)).toFixed(2))
                                sum_2+=list[i]
                                exist+=list[i]
                            }
                            console.log(list)
                            if (sum_2==parseFloat(app.sum)) {
                                isOk=true
                                app.list=list
                            }
                        }
                    },
                },
            })

代码逻辑并不复杂,相信大家能够看得懂,就不多做解释了。我更想提的是一个bug,生成随机数后,会出现分布不均匀的现象。
下面附上5次随机生成结果:

《js模拟微信抢红包算法的讨论》 Paste_Image.png
《js模拟微信抢红包算法的讨论》 Paste_Image.png
《js模拟微信抢红包算法的讨论》 Paste_Image.png
《js模拟微信抢红包算法的讨论》 Paste_Image.png
《js模拟微信抢红包算法的讨论》 Paste_Image.png

相信大家发现了,前面生成的数会很大,后面生成的数会非常小,但检查代码并没有逻辑错误。如果广大网友如果有所想法,请在评论区留言,不胜感激!

    原文作者:会飞小超人
    原文地址: https://www.jianshu.com/p/330f323f5e74
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞