SELF-Treffen in Mannheim 2025
SELFHTML wird 30 Jahre alt! → Veranstaltungs-Ankündigung.
Beispiel:JS-math.PI-3.html
Aus SELFHTML-Wiki
<!DOCTYPE html> <html lang="de"> <head>
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css"> <title>Annäherung an Pi durch Polygone</title> <script> function updatePolygon(n) { let inscribedPoints = [], circumscribedPoints = []; let innerRadius = 1; let outerRadius = 1 / Math.cos(Math.PI / n); for (let i = 0; i < n; i++) { let angle = (2 * Math.PI * i) / n; inscribedPoints.push(`${innerRadius * Math.cos(angle)},${innerRadius * Math.sin(angle)}`); circumscribedPoints.push(`${outerRadius * Math.cos(angle)},${outerRadius * Math.sin(angle)}`); } document.getElementById("inscribed").setAttribute("points", inscribedPoints.join(' ')); document.getElementById("circumscribed").setAttribute("points", circumscribedPoints.join(' ')); let piLower = (n * Math.sin(Math.PI / n)); let piUpper = (n * Math.tan(Math.PI / n)); document.getElementById("pi-lower").innerHTML = `Pinner = ${piLower.toFixed(6)} `; document.getElementById("pi-upper").innerHTML = `Pouter = ${piUpper.toFixed(6)} `; document.getElementById("polygon-sides").textContent = n; // Update the output element } document.addEventListener("DOMContentLoaded", function() { const slider = document.getElementById("polygon-slider"); slider.addEventListener("input", function() { updatePolygon(this.value); }); updatePolygon(slider.value); // Initialize with default value }); </script>
<style> math {font-size:2em; color: steelBlue;}
- pi { color:#c82f04; font-size: 1.25em;}
</style> </head> <body>
Annäherung an Pi durch Polygone
<svg width="500" height="500" viewBox="-1.2 -1.2 2.4 2.4"> <circle cx="0" cy="0" r="1" stroke="#337599" stroke-width="0.01" fill="none" /> <polygon id="inscribed" stroke="#c82f04" stroke-width="0.01" fill="none" /> <polygon id="circumscribed" stroke="#dfac20" stroke-width="0.01" fill="none" /> </svg>
<label>Erhöhe die Anzahl der Polygonseiten: <input id="polygon-slider" type="range" min="6" max="100" value="6" step="1"> <output id="polygon-sides">6</output> </label>
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block"> <mrow> <mi>π</mi> <mo>∼</mo> <mtext id="pi-lower">P_{\text{inner}} = </mtext> <mo>≤</mo> <mi id="pi">π</mi> <mo>≤</mo> <mtext id="pi-upper">P_{\text{outer}} = </mtext> </mrow> </math>
Das rote Polygon ist eingeschrieben und das gelbe Polygon ist umschrieben. Ihre Umfänge bilden die untere und obere Grenze für den Umfang des Kreises.
</body> </html>