Question

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

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

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

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);
}

我甚至不确定这是我选择解决此类任务的好方法。请分享您对如何做到这一点的想法。

Answer 1

我从你的答案中重构了一些代码。

请参阅： http://jsfiddle.net/thirtydot/Bk2yw/

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>');
    }
}

Answer 2

我使用代码玩了一点，似乎我让它正常工作，虽然我确信有一些改进。

以下是代码：

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);

}

以下是其工作原理的截图。底行是页面另一个宽度的结果。 enter image description here

Answer 3

有几个问题：

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

在这里，你已经使用全宽变量“超越”了原始宽度，所以当你执行originalwidth - fullwidth时，它总是负数（根据定义，因为fullwidth > originalwidth）。

另一个问题是，如果随机宽度是例如150个像素而你剩下140个像素的空间，那么你的代码会认为空间耗尽并放入140 px的虚拟div。从您的问题中不清楚，但您可能想要一个100像素的块，其余的块填充40像素块。

这是一个有效的版本：

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);
}

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

3 个答案: