Задача, вывести от 20 до 1000 кругов
По условиям нужно вывести от 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> |
svg random circle
Рустам Гибадуллин,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
</head>
<body>
<svg width = "850" height = "500">
<circle id = "bubble" r = 5 cx = "450" cy = "250" fill = "gold" />
</svg>
<button id = "show_bubble" >Замостить</button>
<script>
window.addEventListener("DOMContentLoaded", function() {
var container = document.querySelector("svg");
var btn = document.querySelector("#show_bubble");
var width = +container.getAttribute("width");
var height = +container.getAttribute("height");
function rnd(min, max) {
return min + Math.random() * (max + 1 - min) | 0
}
function createSVG() {
var attr = {
r: rnd(5, 10),
"cx": rnd(0, width),
"cy": rnd(0, height),
"fill": "#" + (Math.random() * 16777216 | 16777216).toString(16).substr(1)
};
var newuse = document.createElementNS("http://www.w3.org/2000/svg", "circle");
Object.keys(attr).forEach(function(k) {
newuse.setAttributeNS(null,
k, attr[k])
});
container.appendChild(newuse)
}
btn.addEventListener("click", function () {
[].forEach.call( container.querySelectorAll('circle'), function(el) {
container.removeChild(el)
});
var num = rnd(20, 1000);
while (num--) createSVG()
})
});
</script>
</body>
</html>
|
А как сделать так, чтобы при повторном нажатии на замостить генерировалось все заново, а не накладывалось?
|
Цитата:
|
Рони, большое спасибо. А тот способ которым я делал совсем плох?
|
Рустам Гибадуллин,
... лучше для svg, использовать методы svg setAttributeNS createElementNS и по возможности избегать document.write ... |
Спасибо за совет)
|
| Часовой пояс GMT +3, время: 10:46. |