$(document).ready(function() { // option-Felder automatisch generieren anhand daten-Array var optionKnoten = ""; var gleich = " «» "; for(i=0;i<daten.length;i++){ optionKnoten = "<option value='"+ i +"'>"+ daten[i]['de'] + gleich + daten[i]['fremd'] +"</option>"; $("#auswahlEinheiten").append(optionKnoten); } // Standardeinheiten zu Beginn sind PS <-> KW (Index 0) auswahl = 0; wechsleEinheiten(); // bei neuer Auswahl werden mehrere Elemente aktualisiert (z.Bsp. Header) $("#auswahlEinheiten").change(function() { auswahl = $(this).val(); wechsleEinheiten(); }); // Zahleneingabe überprüfen, Buchstaben und Sonderzeichen sind nicht erlaubt. $( "#einheiten .eingabeFeld" ).keydown(function(event) { checkEingabe($(this),event); }); // Eingabe umrechnen und in anderem Feld direkt ausgeben $( "#einheiten .eingabeFeld" ).keyup(function() { umrechnen($(this)); }); });
// alle Masseinheiten werden im Array daten abgespeichert daten = new Array(); // Hilfsfunktion zum Befüllen des 2-dimensionalen daten-Arrays: var i=0; function addData(fremd,de,faktor) { daten[i] = new Array(); daten[i]["fremd"] = fremd; daten[i]["de"] = de; daten[i]["faktor"] = faktor; i++; } /*********** DATEN *************/ // 1. Wert: fremdes Mass, 2. Wert: deutsches Mass, 3. Wert: Faktor (1 PS = 0.7355 KW) // ist gerade nur der Wert für 1 Einheit des fremden Masses vorhanden: 1/Faktor addData("KW","PS",0.7355); addData("Zoll","cm",1/2.54); addData("Fuss","cm",1/30.48); addData("Meilen","km",0.62137); addData("Unze","Gramm",1/28.3495); addData("Pfund","kg",2.2046); addData("Gallone","Liter",1/3.785); addData("Knoten","Km/h",1/1.852); /*********************************/
// globale Variablen var faktorAktuell = daten[0]["faktor"]; //Standardmässig wird mit PS / KW gerechnet var auswahl = 0; function runden(wert,dezStellen) { var faktor = Math.pow(10,dezStellen); var ergebnis = Math.round(wert*faktor)/faktor; return ergebnis; } function wechsleEinheiten() { // bei Wechsel sollen die Eingabefelder wieder geleert werden $("#einheiten .eingabeFeld").val(""); faktorAktuell = daten[auswahl]["faktor"]; var headerNeu = daten[auswahl]["de"] + " in " + daten[auswahl]["fremd"] + " umrechnen"; // nun die verschiedenen Elemente aktualisieren $("#umrechner header").text(headerNeu); $("#einheitBekannt").text(daten[auswahl]["de"]); $("#einheitFremd").text(daten[auswahl]["fremd"]); // Focus auf 1. Feld (Deutsche Masseinheit) setzen $("#wertBekannt").focus(); } function checkEingabe(feld,e) { var inhaltVorher = feld.val(); if ((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105) || e.keyCode == 110 || e.keyCode == 190 || e.keyCode == 8 || e.keyCode == 46 || (e.keyCode >=37 && e.keyCode <=40) || e.keyCode == 9 || e.keyCode == 13) { // Zahlen (oberhalb Buchstaben und Numpad), Punkt (auch Numpad) Lösch- und Pfeiltasten sowie Tabulator und Enter sind erlaubt } else { alert("Bitte nur Zahlen eingeben!"); feld.val(inhaltVorher); // wenn eines der nicht erlaubten Zeichen gedrückt, wird vorheriger Inhalt eingefügt umrechnen(feld); } } function umrechnen(feld) { var feldAktiv = feld.attr("id"); var eingabe = feld.val(); var ergebnis = 0; // Feld mit fremder Einheit wurde ausgewählt if (feldAktiv != "wertBekannt") { ergebnis = runden(eingabe/faktorAktuell,2); $("#wertBekannt").val(ergebnis); } // Feld mit bekannter Einheit wurde ausgewählt else { ergebnis = runden(eingabe*faktorAktuell,2); $("#wertFremd").val(ergebnis); } }
<!DOCTYPE html> <html> <head> <title>Umrechner</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" type="text/css" media="screen" href="styles.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="daten.js"></script> <script type="text/javascript" src="funktionen.js"></script> <script type="text/javascript" src="controler.js"></script> </head> <body> <header id="mainHeader"> <h1>Umrechner</h1> <p>Wählen Sie die gewünschten Masseinheiten aus:</p> <select id="auswahlEinheiten" size="1"> <!-- Inhalt wird mit jQuery abgefüllt --> </select> </header> <section id="umrechner"> <header><!-- Inhalt wird mit jQuery abgefüllt --></header> <section id="einheiten"> <div id="boxEinheitBekannt"> <div id="einheitBekannt"><!-- Inhalt wird mit jQuery abgefüllt --></div> <input type="number" id="wertBekannt" class="eingabeFeld"> </div> <div id="separator"><br> «» </div> <div id="boxEinheitFremd"> <div id="einheitFremd"><!-- Inhalt wird mit jQuery abgefüllt --></div> <input type="number" id="wertFremd" class="eingabeFeld"> </div> </section> </section> </body> </html>
body { font-family: helvetica, arial, tahoma, sans-serif; } #mainHeader { margin-bottom: 20px; } section#umrechner { min-width: 300px; max-width: 360px; height: 120px; border: 1px solid #0000cc; line-height: 150%; border-radius: 7px; box-shadow: 2px 2px 2px #bbbbff; } #umrechner header { background-color: #0033FF; color: white; font-weight: bold; padding: 5px; margin-bottom: 10px; border-top-left-radius: 7px; border-top-right-radius: 7px; } #einheiten { padding: 0px 5px; } #boxEinheitBekannt, #separator, #boxEinheitFremd { height: 80px; float: left; } #wertBekannt, #wertFremd { width: 110px; } #separator { width: 50px; text-align: center; }