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>
<h1>Kreisberechnung mit <code>Math.PI</code></h1>
<p>Mit der Konstanten <em>π</em> kannst du den Umfang des Kreises berechnen.</p>
<p><button type="button" id="start">Los</button></p>
<p id="ausgabe"></p>
<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>
