Dateigrösse: 6.35 kb
1 <!DOCTYPE html> 2 <html lang="de"> 3 <head> 4 <meta charset="utf-8" /> 5 6 <title>Math.round()</title> 7 <!-- 8 function zum Runden von Zahlen 9 --> 10 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 11 <link rel="icon" type="image/svg+xml" href="../img/favicon.svg" sizes="any"> 12 13 <style> 14 * { padding:0; margin:0; } 15 body { padding:2.75em 3em; font: 12pt verdana,georgia,arial,sans-serif; } 16 h2 { font: bold 20pt verdana,sans-serif !important; } 17 form { font: 12pt verdana,sans-serif !important; padding:10pt 0; } 18 p { padding:6pt 0 !important; margin-top:10pt; } 19 .result, .raw, .runden { width: 150pt !important; padding:5pt 5pt !important; font: 11pt verdana,sans-serif !important; } 20 .result { font-size:12pt !important; margin-top:2px !important; padding:8px 4px 8px 8px !important; border:2px solid gray; border-radius:3pt; box-shadow:2pt 2pt 3pt crimson; } 21 .raw { border:2px solid gray; border-radius:3pt; } 22 .runden { width: 160pt !important; } 23 </style> 24 25 <script> 26 function round(wert, dez) 27 { 28 wert = parseFloat(wert); 29 if (!wert) return 0; 30 31 dez = parseInt(dez); 32 if (!dez) dez=0; 33 34 var umrechnungsfaktor = Math.pow(10, dez); 35 var multi = Math.round(wert * umrechnungsfaktor); 36 var res = multi / umrechnungsfaktor; 37 /*** Control in der Console ***/ 38 console.log(umrechnungsfaktor); 39 console.log(multi); 40 console.log(dez); 41 if(umrechnungsfaktor == '0.00001') { 42 res = Math.round(res); 43 console.log(res); 44 } 45 return res; 46 } 47 /*** Beispiel **************************************************** 48 zahl = 8175.4647693075; 49 gerundet = round(zahl, 3); //auf drei Stellen runden = 8175.465 50 *****************************************************************/ 51 function ausgabe(wert, dez) 52 { 53 valeur = wert.replace(',', '.'); 54 valore = valeur.replace(/'/g, ''); 55 //console.log(valore); 56 57 index(valore); 58 59 var result = 0; 60 result = round(valore, dez); 61 62 document.getElementById('res').innerHTML=result; 63 64 hideres(wert, dez); 65 } 66 67 function index(valore) 68 { 69 var l = valore.length; // alle Dezimalstellen (plus Kommata/Punkt) 70 var n = valore.indexOf("."); // Position Komma/Punkt, wenn keiner n = -1 71 var k = ((l-n)-2); // Differenz von l und n minus Punkt und letzter Stelle (-2) 72 73 //numinfo(l,n,k); 74 75 error(n,l); 76 77 if(n != -1) 78 { 79 while(k >0) { 80 console.log(k); 81 document.getElementById(k).style.display='flex'; 82 k--; 83 } 84 n--; 85 while(n >=0) { 86 console.log(n); 87 document.getElementById('p'+n).style.display='flex'; 88 n--; 89 } 90 } else { 91 l--; 92 while(l >=0) { 93 console.log(l); 94 document.getElementById('p'+l).style.display='flex'; 95 l--; 96 } 97 } 98 } 99 function error(n, l) { 100 if((n == -1 && l >7) || (n != -1 && n >7)) { 101 errormsg(); 102 } 103 if(((l-n)-1) >7) { 104 errormsg2(); 105 } 106 } 107 function errormsg() { 108 document.write('<html style="padding:0; margin:0;"><body style="padding:2.5em 3em;"><h1 style="font:bold 20pt verdana,sans-serif; color:crimson;">♣ Zahl zu gross ♦ max. 9 Millionen ♠</h1><button style="padding:5pt 10pt; margin-top:1em; border-radius:5px; font:bold 11pt verdana,sans-serif; border:2pt solid black; background:white;" onclick="location.href=\'http://www.michaelster.ch/jsTestFolder/math.round.htm\';">verstanden</button></body></html>'); 109 } 110 function errormsg2() { 111 document.write('<html style="padding:0; margin:0;"><body style="padding:2.5em 3em;"><h1 style="font:bold 20pt verdana,sans-serif; color:crimson;">♦ Zu lange Zahl ♣ max. 7 Dezimalstellen ♠</h1><button style="padding:5pt 10pt; margin-top:1em; border-radius:5px; font:bold 11pt verdana,sans-serif; border:2pt solid black; background:white;" onclick="location.href=\'http://www.michaelster.ch/jsTestFolder/math.round.htm\';">verstanden</button></body></html>'); 112 } 113 function numinfo(l,n,k) { 114 document.getElementById("interg").innerHTML = n + " :: " + l + " :: " + k; 115 } 116 function hideres(wert, dez) { 117 if(wert && dez) { 118 document.getElementById('interg').style.display='flex'; 119 document.getElementById('res').style.display='flex'; 120 } else { 121 document.getElementById('interg').style.display='none'; 122 document.getElementById('res').style.display='none'; 123 } 124 } 125 </script> 126 127 </head> 128 129 130 <body onload="document.getElementById('f0').elements['rawnumber'].value='';"> 131 132 <h2>Math.round()</h2> 133 134 <form name="f0" id="f0"> 135 <p>Zahl:</p> 136 <input type="text" id="zahl" name="rawnumber" placeholder="Bitte hier eingeben" onblur="ausgabe(this.value);" title="Kein Komma, nur Punkt" size="15" maxlength="15" class="raw" value="" autofocus /> 137 <p>runden auf:</p> 138 <select name="selround" class="runden" size="1" id="sel_id" onchange="ausgabe(document.getElementById('f0').elements['rawnumber'].value, this.value);"> 139 <option value="">Bitte wählen </option> 140 <option value="">- <> - <> - <> - <> - <> - <> - <> - </option> 141 <option style="display:none" id="6" value="6"> • millionstel</option> 142 <option style="display:none" id="5" value="5"> • hunderttausendstel</option> 143 <option style="display:none" id="4" value="4"> • zehntausendstel</option> 144 <option style="display:none" id="3" value="3"> • tausendstel</option> 145 <option style="display:none" id="2" value="2"> • hundertstel</option> 146 <option style="display:none" id="1" value="1"> • zehntel</option> 147 <option style="display:none" id="p0" value="0"> ¤ Einer</option> 148 <option style="display:none" id="p1" value="-1"> ¤ Zehner</option> 149 <option style="display:none" id="p2" value="-2"> ¤ Hunderter</option> 150 <option style="display:none" id="p3" value="-3"> ¤ Tausender</option> 151 <option style="display:none" id="p4" value="-4"> ¤ Zehntausender</option> 152 <option style="display:none" id="p5" value="-5"> ¤ Hunderttausender</option> 153 <option style="display:none" id="p6" value="-6"> ¤ Millionen</option> 154 <option> </option> 155 </select> 156 <p style="display:none" id="interg" class="interg"> 157 <b>Resultat:</b> 158 </p> 159 <div style="display:none" class="result" id="res"></div> 160 </form> 161 162 </body> 163 </html> 164 165