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

Question

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

这种方式我总是知道，当我运行灌装功能时，我得到一个div总共总是1240px的集合。 div的数量不应该是一个固定的数字，所以可以有4个或7个div。 divs数量是随机生成的。然后，如果剩下一些空间，对于1240像素，这个数字是40像素，我想，它是用一些不必是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); 

} 

这里是它如何工作的屏幕截图。最下面一行是页面另一个宽度的结果。

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