По условиям нужно вывести от 20 до 1000 кругов отрисованных с помощью svg. Цвет, координаты по Х и Y, радиус от 5 до 10 рх генерируется случайно, все эти условия я выполнил, не могу придумать как вывести не 1 а заданное число элементов.
<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
<link rel = "stylesheet" href = "style.css">
<!--<script src = "js.js"></script>-->
</head>
<body id = "body">
<div id = "block1">
<div id = "block2">
<div id = "svg">
<svg width = "850" height = "500">
<circle id = "bubble" r = 5 cx = "450" cy = "250" fill = "gold" />
</svg>
</div>
<button id = "show_bubble" >Замостить</button>
var showBubble = document.getElementById(show_bubble);
document.write(showBubble);
var numBubbles = numOfBubbles();
function numOfBubbles(){ //генерируем количество пузырьков
var min = 20;
var max = 1000;
for (var i = 0; i < 1 ; i++){
randomNumber = Math.floor(Math.random() * (max - min +1)) + min;
}
return randomNumber;
}
for (var i = 0; i < numBubbles; i++){
var s = display(10);
function display(theBubbles){
var theBubbles = document.getElementById("bubble");
var radius = theBubbles.getAttribute("r");
var color = theBubbles.getAttribute("fill");
var axisX = theBubbles.getAttribute("cx");
var axisY = theBubbles.getAttribute("cy");
var arrColors = ["gold", "green","blue", "crimson", "plum", "lime", "silver", "skyblue" ];
function randomColor(min, max){
randomNumber = Math.floor(Math.random() * (max - min +1)) + min;
return randomNumber;
}
function randomWidth(){ // координата по Х
var maxX = 850;
var minX = 0;
randomWidth = Math.floor(Math.random() * (maxX - minX + 1)) + minX;
return randomWidth;
}
function randomHeight(){ // координата по Y
var maxY = 600;
var minY = 0;
randomHeight = Math.floor(Math.random() * (maxY - minY + 1)) + minY;
return randomHeight;
}
function generateOfBubbles(){ //генерируем радиус пузырьков
var min = 5;
var max = 10;
randomNumber = Math.floor(Math.random() * (max - min +1)) + min;
return randomNumber;
}
var min = 0;
var max = arrColors.length - 1;
var numColor = randomColor(min,max);
theBubbles.setAttribute("fill",arrColors[numColor]);
var valWidth = randomWidth();
theBubbles.setAttribute("cx", valWidth);
var valHeight = randomHeight();
theBubbles.setAttribute("cy", valHeight);
var valRadius = generateOfBubbles();
theBubbles.setAttribute("r", valRadius);
}
}
</div>
</div>
</body>
</html>