All geek questions in one place

Exiting a for loop that creates divs when it reaches the end of the screen

I am trying to do a little exercise that refreshes the page when I click the big button in the middle, and the small dots change color. I stopped scrolling the page, so the page is filled with dots, but I noticed that the overflow property works differently in different browsers. Then I thought about another problem, on mobile phones or tablets, the dots will be displayed differently again! Therefore, I am not sure that this is even possible, but the desired result is that the loop creates points until the screen is full and the button is displayed in the middle of the screen. Can someone please tell me if this idea is possible, since I could not find such questions. Or, if there is a better way to get the desired result. Also, if you have time, please briefly explain why, because I want to understandhow it works and learn from it. So ... This is 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;
 }

+4
2

, - :

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

:

  • ,
  • <html>, <body> 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>";
}
+1

, 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;
+1

Source: https://habr.com/ru/post/1666160/

More articles:


All Articles