První verze - zobrazení kruhu
<!DOCTYPE html> <html lang="cs"> <head> <meta charset="utf-8"/> <title>Člověče nezlob se</title> <style> #herniPlocha { position: relative } .policko { border: 1px solid black; width: 20px; height: 20px; position: absolute; top: 0; left: 0; border-radius: 50%; } </style> </head> <body> <div id="herniPlocha"></div> <script> const pocetPolicek = 40 const sirkaPlochy = 400 const vyskaPlochy = 400 for (let i = 0; i < pocetPolicek; i++) { const uhel = i * (2 * Math.PI) / pocetPolicek const policko = document.createElement("div") policko.classList.add("policko") const x = Math.cos(uhel) * sirkaPlochy / 2 + sirkaPlochy / 2 const y = Math.sin(uhel) * sirkaPlochy / 2 + sirkaPlochy / 2 policko.style.transform = `translate(${x}px,${y}px)` document.getElementById('herniPlocha').append(policko) } </script> </body> </html>