SELF-Treffen in Mannheim 2025

SELFHTML wird 30 Jahre alt! → Veranstaltungs-Ankündigung.

Beispiel:JS-math.PI.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!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>

Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:JS-math.PI.html&oldid=102195“