Javascript 如何将数字分解为随机生成的部分

我想在页面上做一个全宽的div。它是一个容器。然后我想用div填充它，每个div的宽度是50*n，其中n是一个随机生成的数字。假设我有一个宽度为1240px的容器div。现在我运行一个JS函数，用不同宽度的10个div填充它。现在如果我把所有的内div宽度加起来，我得到1240px

这样我就知道，当我运行filling函数时，我得到的div集合总是1240px。div的数量不应该是固定的，所以可以有4或7个div。divs数量是随机生成的。然后，如果还有一些空间，对于1240px，这个数字是40px，我想，它填充了一些虚拟div，不必是50*n的宽度

我已经创建了一个函数，但它并不总是像预期的那样工作

function generateItems() {
    originalwidth = $(document).width() - 40;
    var fullwidth = 0;
    var counter = 0;
    do{
        var randomnumber = 1 + Math.floor(Math.random() * 4);
        tempwidth = 50 * randomnumber;
        fullwidth += tempwidth;
        if (fullwidth > originalwidth) {
            $('#questions').append('<div class="question-area" style="width:' + (originalwidth - fullwidth) + 'px;"><strong>' + (originalwidth - fullwidth) + '</strong></div>');
            break;
        }
        width_padding = tempwidth;
        $('#questions').append('<div class="question-area" style="width:' + width_padding + 'px;">' + width_padding + '</div>');
        counter++;
    }
    while (true);
}

函数generateItems（）{
原始宽度=$（文档）.width（）-40；
var fullwidth=0；
var计数器=0；
做{
var randomnumber=1+Math.floor（Math.random（）*4）；
tempwidth=50*随机数；
fullwidth+=tempwidth；
如果（全宽>原始宽度）{
$（“#问题”）.append（“”+（originalwidth-fullwidth）+“”）；
打破
}
宽度\填充=tempwidth；
$（“#问题”）。追加（“”+宽度+填充+“”）；
计数器++；
}
虽然（正确）；
}

---

我甚至不确定这是我选择的解决这一任务的好方法。请分享您对如何更好地执行此操作的想法。

我对代码进行了更多的处理，似乎我使其正常工作，但我确信还有一些地方需要改进

代码如下：

function generateItems() {
    originalwidth = $(document).width() - 40;
    $('#questions').css('width', originalwidth);
    var fullwidth = 0;
    var counter = 0;
    do{
        var randomnumber = 1 + Math.floor(Math.random() * 4);
        tempwidth = 50 * randomnumber;
        fullwidth += tempwidth;
        if (fullwidth > originalwidth) {
            $('#questions').append('<div class="question-area" style="width:' + (originalwidth + tempwidth - fullwidth) + 'px;"><strong>' + (originalwidth + tempwidth - fullwidth) + '</strong></div>');
            break;
        }
        width_padding = tempwidth;
        $('#questions').append('<div class="question-area" style="width:' + width_padding + 'px;">' + width_padding + '</div>');
        counter++;
    }
    while (true);

}

函数generateItems（）{
原始宽度=$（文档）.width（）-40；
$（“#问题”）.css（'width'，originalwidth）；
var fullwidth=0；
var计数器=0；
做{
var randomnumber=1+Math.floor（Math.random（）*4）；
tempwidth=50*随机数；
fullwidth+=tempwidth；
如果（全宽>原始宽度）{
$（“#问题”）.append（“”+（originalwidth+tempwidth-fullwidth）+“”）；
打破
}
宽度\填充=tempwidth；
$（“#问题”）。追加（“”+宽度+填充+“”）；
计数器++；
}
虽然（正确）；
}

下面是它的工作原理截图。底行是页面另一宽度的结果。 有几个问题：

fullwidth += tempwidth;
if (fullwidth > originalwidth) {
    $('#questions').append('<div class="question-area" style="width:' + (originalwidth - fullwidth) + 'px;"><strong>' + (originalwidth - fullwidth) + '</strong></div>');
    break;
}

---

我已经根据你的答案重构了代码

请参见：

函数generateItems（）{
var slotWidth=50，
maxSlots=3，
这个长，这个宽；
var remainingSlots=Math.floor（$（“#问题”）.width（）/slotWidth，
剩余宽度=$（“#问题”）.width（）%slotWidth；
同时（剩余插槽>0）{
thisSlotNum=Math.min（剩余插槽，1+Math.floor（Math.random（）*maxSlots））；
剩余插槽-=此插槽编号；
thisWidth=thisSlotNum*slotWidth；
$（“#问题”）。追加（“”+thisWidth+”）；
}
如果（剩余宽度）{
$（“#问题”）。追加（“”+remaingWidth+”）；
}
}

我不确定您为什么需要随机数。。。为什么不简单地

（1240-40）/n

？如果我只是把1240除以n，我就得到n个等宽的div，但我需要它们与50px步长不同。除了你的问题，你为什么不直接做

var randomnumber=1+Math.floor（Math.random（）*3）而不是do循环？看起来效率更高。是的，谢谢，已经修好了。
function generateItems() {
    var originalwidth = $(document).width() - 40;
    var fullwidth = 0;
    var counter = 0;
    do{
        var randomnumber = 1 + Math.floor(Math.random() * 3);
        var tempwidth = 50 * randomnumber;
        if (fullwidth + tempwidth > originalwidth) {
            var diff = originalwidth - fullwidth;
            if( originalwidth - fullwidth > 50 ) {
                tempwidth = diff - ( diff % 50 );
            }
            else {
                $('#questions').append('<div class="question-area" style="width:' + diff + 'px;"><strong>' + diff + '</strong></div>');
                break;
            }
        }
        fullwidth += tempwidth;
        $('#questions').append('<div class="question-area" style="width:' + tempwidth + 'px;">' + tempwidth + '</div>');
        counter++;
    }
    while (true);
}

function generateItems() {
    var slotWidth = 50,
        maxSlots = 3,
        thisSlotNum, thisWidth;
    var remainingSlots = Math.floor($('#questions').width() / slotWidth),
        remainingWidth = $('#questions').width() % slotWidth;

    while (remainingSlots > 0) {
        thisSlotNum = Math.min(remainingSlots, 1 + Math.floor(Math.random() * maxSlots));
        remainingSlots -= thisSlotNum;

        thisWidth = thisSlotNum * slotWidth;
        $('#questions').append('<div class="question-area" style="width:' + thisWidth + 'px;"><strong>' + thisWidth + '</strong></div>');
    }
    if (remainingWidth) {
        $('#questions').append('<div class="question-area" style="width:' + remainingWidth + 'px;"><strong>' + remainingWidth + '</strong></div>');
    }
}