退出当到达屏幕末端时创建div的for循环 我试图完成一个小小的练习，当中间的大按钮被点击，小点变颜色时，刷新页面。 我已经停止了页面的滚动，因此页面充满了圆点，但我注意到溢出属性在不同浏览器上的作用不同。然后我想到了另一个问题，在手机或平板电脑上，圆点的显示方式将再次不同！ 所以我不确定这是否是可能的，但是想要的结果是循环创建点直到屏幕满了，按钮显示在屏幕中间。 有人能告诉我这个想法是否可行，因为我还没有找到任何类似的问题。或者如果有更好的方法来获得我想要的结果。如果你有时间，请简要解释一下原因，因为我想了解它是如何工作的，并从中学习。 所以 这是JavaScript var htmlDot = ""; var red; var green; var blue; var rgbColor; function colourSelect() { return Math.floor(Math.random() * 256 ); } for(var i = 1; i<=100; i+=1) { red = colourSelect(); green = colourSelect(); blue = colourSelect(); rgbColor = "rgb(" + red + "," + green + "," + blue + ")"; htmlDot += "<div style=\"background-color:"+ rgbColor + " \"></div>"; } document.write(htmlDot);

提前感谢您

对于点数，您需要根据浏览器窗口的尺寸计算出浏览器窗口中适合的点数，而不是使用100

var w = window.innerWidth; // browser width
var h = window.innerHeight; // browser height
var size = 60; // 50px + 5px + 5px (width or height) + (left or top margin) + (right or bottom margin)
var hdots = Math.floor(w/size); // how many dots fit horizontally
var vdots = Math.floor(h/size); // how many dots fit vertically
var numDots = hdots * vdots;

---

我想你在找这样的东西：

要点：

• 计算可以水平放置的点的数量
• 计算点的总数
• 将
  ，
  宽度和高度定义为视口的100%
• 溢出：隐藏在html上，因此不会出现滚动
• 将onclick事件添加到按钮

下面是一些代码：

var numDots = hdots * vdots;

while(numDots--){
    red = colourSelect();
    green = colourSelect();
    blue = colourSelect();
    rgbColor = "rgb(" + red + "," + green + "," + blue + ")";
    htmlDot += "<div class='dot' style=\"background-color:"+ rgbColor + " \"></div>";
}

var numDots=hdots*vdots；
而（numDots--）{
红色=颜色选择（）；
绿色=颜色选择（）；
蓝色=颜色选择（）；
rgbColor=“rgb（“+红色+”、“+绿色+”、“+蓝色+”）；
htmlDot+=“”；
}

在DOM中追加每个div后检查其偏移量。如果偏移的最外侧边缘超过window.height，则停止/从循环返回，否则继续。简单。虽然逻辑很简单，但实现起来可能需要一些努力。我已经对那些圈子感到头疼了。：）我也是，看了这么久，闭上眼睛我看到了点点滴滴：-谢谢你花时间解释你的步骤并分享这个jsbin。我真的很感激，没问题@Jessica，但记住接受答案，祝学习过程好运：）

var w = window.innerWidth; // browser width
var h = window.innerHeight; // browser height
var size = 60; // 50px + 5px + 5px (width or height) + (left or top margin) + (right or bottom margin)
var hdots = Math.floor(w/size); // how many dots fit horizontally
var vdots = Math.floor(h/size); // how many dots fit vertically
var numDots = hdots * vdots;

var numDots = hdots * vdots;

while(numDots--){
    red = colourSelect();
    green = colourSelect();
    blue = colourSelect();
    rgbColor = "rgb(" + red + "," + green + "," + blue + ")";
    htmlDot += "<div class='dot' style=\"background-color:"+ rgbColor + " \"></div>";
}