site-z/calcCircleArea.html at master · LFF5644/site-z · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<?
	const {importHead}=globals.functions;
?><!DOCTYPE html>
<html>
	<head>
		<?=importHead({
			input,
			title:"Flächeninhalt Berechnen (Kreis)",
			script:[],
			tabs:2,
		})?>
	</head>
	<body>
		<h1>Flächeninhalt Berechnen (Kreis)</h1>
		<p>Bitte den gemessenen Radius vom Kreis eingeben!</p>
		<p>Dabei wird die Formel genutzt: <code>A = r * r * <span title=3.14159265359 id=span_title_pi>π</span></code></p>
		<p><code>Pi = π = <span id="span_pi"></span></code></p>
		<p><label>Radius (r): <input id=input_radius value=3,5 placeholder=3,5 type=number oninput="calc(event.target.value)"></label></p>
		<h2><code id=output></code></h2>
		<p><label><input type=checkbox onchange="showHide('fieldset_round_result',this.checked)"> Rundung fürs Ergebnis Anzeigen</label></p>
		<p><label><input type=checkbox onchange="showHide('fieldset_round_pi',this.checked)"> Rundung für <code>π</code> Anzeigen</label></p>
		<fieldset id=fieldset_round_result class=hidden>
			<legend>Ergebnis Runden</legend>
			<p><label><input type=radio name=round_result value=2 checked> 2 Nachkommastellen</label></p>
			<p><label><input type=radio name=round_result value=4> 4 Nachkommastellen</label></p>
			<p><label><input type=radio name=round_result value=8> 8 Nachkommastellen</label></p>
			<p><label><input type=radio name=round_result value=0> Ganzzahl</label></p>
			<p><label><input type=radio name=round_result value=-1> Gar nicht</label></p>
		</fieldset>
		<fieldset id=fieldset_round_pi class=hidden>
			<legend><code>π</code> Runden</legend>
			<p><label><input type=radio name=round_pi value=2 checked> 2 Nachkommastellen</label></p>
			<p><label><input type=radio name=round_pi value=4> 4 Nachkommastellen</label></p>
			<p><label><input type=radio name=round_pi value=8> 8 Nachkommastellen</label></p>
			<p><label><input type=radio name=round_pi value=-1> Gar nicht</label></p>
		</fieldset>

		<script>
			const outputLabel=document.getElementById("output");
			const piDefault=Math.PI;
			let PI=piDefault;

			function calc(number=null){
				if(number===null){
					number=document.getElementById("input_radius").value;
				}
				outputLabel.style.color="unset";

				if(isNaN(number)||number<=0){
					outputLabel.innerHTML="Es werden <b>nur</b> Nummern Akzeptiert! die grösser als 0 sind!";
					outputLabel.style.color="red";
					return false;
				}
				if(number==Infinity){
					outputLabel.innerHTML="Die Nummer ist zu groß!";
					outputLabel.style.color="red";
					return false;
				}

				const result=PI*number*number;
				let resultRound=Math.round(result);
				const round=Number(getRadioValue("round_result"));
				if(round>0){
					let x=result*Number("1e"+round);
					x=Math.round(x);
					x=x/Number("1e"+round);
					resultRound=x;
				}
				outputLabel.innerHTML=`Ao = <span title=Ergebnis style="color:green">${String(round==-1?result:resultRound).split(".").join("<b>,</b>")}</span>`;
				return true;
			}
			function getRadioValue(name){
				const radios=document.getElementsByName(name);
				let radio="";
				for(radio of radios){
					if(radio.checked){
						return radio.value;
					}
				}
				return false;
			}
			function setPI(comma=null){
				if(comma===null){comma=Number(getRadioValue("round_pi"))}
				if(comma>0){
					let x=piDefault*Number("1e"+comma);
					x=Math.round(x);
					x=x/Number("1e"+comma);
					PI=x;
				}
				else if(comma==-1){
					PI=piDefault;
				}
				console.log("SET PI: "+PI);
				console.log("comma: "+comma);
				const pi_label=String(PI).split(".").join(",");
				document.getElementById("span_title_pi").title=pi_label;
				document.getElementById("span_pi").innerText=pi_label;
				calc();
			}
			function showHide(id,show){
				const element=document.getElementById(id);
				element.className=show?"":"hidden";
			}

			let radio="";
			for(radio of document.getElementsByName("round_result")){
				radio.onchange=(event=>{
					calc();
				})
			}
			for(radio of document.getElementsByName("round_pi")){
				radio.onchange=(event=>{
					setPI();
				})
			}
			delete radio;

			setPI();

		</script>
	</body>
</html>