Выход из цикла for, который создает div при достижении конца экрана

Я пытаюсь выполнить небольшое упражнение, которое обновляет страницу, когда нажимается большая кнопка в середине, а маленькие точки меняют цвет. Я остановил прокрутку страницы, чтобы страница была заполнена точками, но я заметил, что свойство переполнения действует по-разному в разных браузерах. Тогда я подумал о другой проблеме, на мобильных телефонах или планшетах точки снова будут отображаться иначе! Поэтому я не уверен, возможно ли это вообще, но желаемый результат заключается в том, что цикл создает точки до тех пор, пока экран не заполнится, а кнопка не появится в середине экрана. Может ли кто-нибудь сказать мне, если эта идея возможна, так как я не смог найти подобные вопросы. Или, если есть лучший способ получить желаемый результат. Также, если у вас есть время, не могли бы вы вкратце объяснить, почему, поскольку я хочу понять, как это работает, и извлечь уроки из этого. Итак... Это 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);

Это HTML

<!doctype html>
<html>
<head>

     <link rel="stylesheet" href="main.css"> 
</head>
<body>
    <button id="refresh">Click Me!</button>
    <script src="script.js"></script>
</body>
</html>

Это CSS

  body {
    position: relative;
    overflow: hidden;
}

#refresh {
    font: 40px bold;
    font-family: sans-serif;
    width: 200px;
    height: 200px;
    display: inline-block;
    border-radius: 50%;
    margin: 5px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    background-color: rgb();
}
div {
    width: 50px;
    height: 50px;
    display: inline-block;
    border-radius: 50%;
    margin: 5px;
 }

заранее спасибо

Источник

2 ответа

Решение

Я думаю, что вы ищете что-то вроде этого:

https://jsbin.com/racahapevi/edit?html,css,js,output

Ключевые моменты:

  • Рассчитать количество точек, которые могут поместиться по горизонтали
  • Рассчитать общее количество точек
  • определять <html>, <body> ширина и высота до 100% области просмотра
  • переполнение: скрыто в html, поэтому не будет прокрутки
  • Добавьте на событие событие кнопку.

Вот некоторый код:

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>";
}
Источник

Вместо того, чтобы использовать 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;
Источник
Другие вопросы по тегам