SELF-Treffen in Mannheim 2025
SELFHTML wird 30 Jahre alt! → Veranstaltungs-Ankündigung.
Beispiel:JS-math.PI.html
Aus SELFHTML-Wiki
<!DOCTYPE html> <html> <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>Math.PI</title>
<style> svg { max-width: 30em; } </style>
<script> document.addEventListener('DOMContentLoaded', function () { document.getElementById('start').addEventListener('click', ausgeben);
console.log(Math.PI); // Expected output: 3.141592653589793
function calculateCircumference(radius) { return 2 * Math.PI * radius; }
function ausgeben() { let kreis = document.getElementById('kreis'); let radius = parseFloat(kreis.getAttribute('r')); let circumference = calculateCircumference(radius);
document.getElementById('ausgabe').textContent = `Der Radius des Kreises beträgt: ${radius} ; der Umfang: ${circumference.toFixed(2)}`;
}
}); </script>
</head> <body>
Kreisberechnung mit Math.PI
Mit der Konstanten π kannst du den Umfang des Kreises berechnen.
<button type="button" id="start">Los</button>
<svg
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<title>Kreisberechnung</title>
<defs> <marker id="r-end" style="overflow:visible" orient="auto"> <path transform="matrix(0.4,0,0,0.4,4,0)" style="fill:#dfac20;stroke:#dfac20;stroke-width:1" d="M 0,0 5,-5 -12.5,0 5,5 Z" /> </marker> <marker style="overflow:visible" orient="auto" id="d-start"> <path transform="matrix(0.4,0,0,0.4,4,0)" style="fill:#c82f04;stroke:#c82f04;stroke-width:1;" d="M 0,0 5,-5 -12.5,0 5,5 Z" id="path5783" /> </marker> <marker style="overflow:visible" orient="auto" id="d-end"> <path transform="matrix(-0.4,0,0,-0.4,-4,0)" style="fill:#c82f04;stroke:#c82f04;stroke-width:1;" d="M 0,0 5,-5 -12.5,0 5,5 Z" id="path5786" /> </marker> </defs>
<rect width="100%" height="100%" style="fill:none;stroke:#132c39; stroke-width:0" />
<circle id="kreis" cx="144" cy="103" r="90" style="fill:#fffbe5;stroke:#337599;stroke-width:2;stroke-dasharray:5, 5;"/>
<path id="diameter" style="fill:none;stroke:#c82f04;stroke-width:1.87;stroke-dasharray:5 5;marker-start:url(#d-start);marker-end:url(#d-end)" d="M 209.80156,51.518328 76.801562,157.51833" /> <text x="7" y="163" transform="matrix(0.77654332,-0.63011426,0.63037826,0.77624732,0,0)" style="font-size:16px;font-family:Verdana;fill:#c82f04;stroke-width:1" >Durchmesser</text> <path id="radius" style="fill:none;stroke:#dfac20; stroke-width:2;stroke-dasharray:5 5;marker-start:url(#r-end)" d="m 219.50156,144.51833 -73.7,-40.1" /> <text x="191" y="18" transform="matrix(0.87826204,0.47853502,-0.47855502,0.87786404,0,0)" style="font-size:16px;font-family:Verdana;fill:#dfac20;stroke-width:1" id="text3958">Radius</text> <text x="5" y="246" style="font-size:16px;font-family:Verdana;fill:#c82f04;stroke-width:1" id="text3960">Durchmesser</text> <text x="20" y="220" style="font-size:16px;font-family:Verdana;fill:#337599;stroke-width:0.34" id="text3962">Umfang</text> <path style="fill:none;stroke:#c82f04;stroke-width:1" d="M 5,230 h100" id="line" /> <text x="123.60156" y="235.11832" style="font-size:19.4px;font-family:'Comic Sans MS';fill:#dfac20;stroke-width:0.34" id="text3966">=</text> <text x="144.90157" y="241.91832" style="font-size:60px;font-family:'Times New Roman';fill:#dfac20;stroke-width:1" id="text3968">π</text> <text id="PI" x="189" y="229" transform="scale(0.97282894,1.0279299)" style="font-size:20px;font-family:'Comic Sans MS';fill:#dfac20;stroke-width:0.34" >= 3.14159…</text> <circle cx="144" cy="103" r="1.5" style="fill:none;stroke:#337599;stroke-width:3" id="center" /> <path style="fill:none;stroke:none;stroke-width:1.9;stroke-dasharray:5.7, 1.9" d="m 239.16668,103.84101 c 0,51.56611 -44.16758,95.6278 -96.05377,96.16383 C 91.226721,200.54087 48.238371,160.01698 45.665502,108.23645 43.092633,56.455925 81.900072,11.96541 133.57185,7.3555503 185.24364,2.7456897 233.05612,43.162374 238.63067,94.514077" id="path9799" /> <text style="font-size:16px;line-height:125%;font-family:Verdana;fill:#337599;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;" id="text9845" transform="rotate(-174.06529,141.67181,103.51234)"><textPath xlink:href="#path9799" id="textPath11620"><tspan id="tspan9843">Umfang</tspan></textPath></text>
</svg>
</body> </html>