Taschenrecher für die Homepage

[Potterfans]

Moin moin,

hab mal einen kleinen Taschenrechner gemacht, vielleicht benötigt ihn der ein oder andere für die Homepage.

Funktion:

• Grundrechenarten
• Wurzelziehen
• Potenzrechnung (sowie x^y)
• PI

Sollte großer Bedarf bestehen, erweitere ich diesen gerne

Über Feedback bin ich dankbar

    <style>
    #trechner input{
      -moz-box-shadow:inset 0px 1px 7px -2px #ffffff;
      -moz-box-shadow:inset 0px 1px 7px -2px #ffffff;
      -webkit-box-shadow:inset 0px 1px 7px -2px #ffffff;
      background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
      background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
    }
    </style>        <script>
        var pi = "141592653589793";
        var set_point = true;
        var suche = new Array("++", "--", "//", "**", "..")
        var ersetze = new Array("+", "-", "/", "*", ".")
        function str_replace(search, replace, subject)
        {
            return subject.split(search).join(replace);
        }
        function typein(value)
        {
            if(document.getElementById("ausgabe").innerHTML.length > 20 && value != "clean" && value != "del_last")
            {
                alert("Zahl konnte nicht übernommen werden, mit verkleinere deine Rechnung");
                return;
            }
            for(i=0;i<suche.length;i++)
            {
                var new_str = str_replace(suche[i],ersetze[i], document.getElementById("ausgabe").innerHTML)
                document.getElementById("ausgabe").innerHTML = new_str;
            }
            
            if(document.getElementById("ausgabe").innerHTML.search(/Ausgabe/) != -1)
            {
                document.getElementById("ausgabe").innerHTML = "";
            }
            
            if(value != "=" && value != "clean" && value != "del_last" && value != "pi" && value != "wurzel" && value != "xhoch" && value != "xhochy")
            {
                if(value != ".")
                {
                    if(isNaN(value))
                    {
                        set_point = true;
                    }
                    document.getElementById("ausgabe").innerHTML += value;
                }
                else
                {
                    if(set_point == true)
                    {
                        set_point = false;
                        document.getElementById("ausgabe").innerHTML += value;
                    }
                }
            }
            
            else
            {
                switch(value) {
                    case "clean":
                        document.getElementById("ausgabe").innerHTML = "<em>Ausgabe</em>";
                    break;
                    
                    case "xhoch":
                        document.getElementById("ausgabe").innerHTML = Math.pow(eval(document.getElementById("ausgabe").innerHTML),2);
                    break;
                    
                    case "xhochy":
                        x = prompt("Bitte gebe den Exponenten ein", "3")
                        if(x>99)
                        {
                            alert("Exponent zu hoch!");
                            return;
                        }
                        else
                        {
                            document.getElementById("ausgabe").innerHTML = Math.pow(eval(document.getElementById("ausgabe").innerHTML),x);
                        }
                    break;
                    
                    case "del_last":
                        document.getElementById("ausgabe").innerHTML = document.getElementById("ausgabe").innerHTML.substring(0,document.getElementById("ausgabe").innerHTML.length-1);
                    break;
                    
                    case "pi":
                        var nu = prompt("Wieviele Nachkommastellen sollen übertragen werden? Maximal 15", "5");
                        if(nu < 16 && nu > 0)
                        {
                            nupi = pi.substr(0, nu);
                            document.getElementById("ausgabe").innerHTML += "3."+nupi;
                        }
                    break;
                    
                    case "wurzel":
                        document.getElementById("ausgabe").innerHTML = Math.sqrt(eval(document.getElementById("ausgabe").innerHTML));
                    break;
                    
                    case "=":
                        var ergebniss = eval(document.getElementById("ausgabe").innerHTML);
                        if(ergebniss == "undefined")
                        {
                            ergebniss = "Fehler!";
                        }
                        document.getElementById("ausgabe").innerHTML = "<b>"+ ergebniss +"</b>";
                    break;
                }
            }


        }
        </script>
        <div style="background: #DAE6E5; background: -moz-linear-gradient(top, #EBF2F2, #C4CFCE); width:250px; padding:10px; font-family: Comic Sans MS;" id="trechner">
            <div id="ausgabe" style="border: 1px solid black; width:240px; text-align:right; padding: 4px;"><em>Ausgabe</em></div>
            <input type="button" value="1" onclick="typein(1)" style="width: 40px"><input type="button" value="2" onclick="typein(2)" style="width: 40px"><input type="button" value="3" onclick="typein(3)" style="width: 40px"> <input type="button" value="+" onclick="typein('+')" style="width: 40px"><input type="button" value="&radic;" onclick="typein('wurzel')" style="width: 40px" style="width: 40px"><input type="button" value="AC" onclick="typein('clean')" style="width: 40px" style="width: 40px"><br>
            <input type="button" value="4" onclick="typein(4)" style="width: 40px"><input type="button" value="5" onclick="typein(5)" style="width: 40px"><input type="button" value="6" onclick="typein(6)" style="width: 40px"> <input type="button" value="-" onclick="typein('-')" style="width: 40px"><input type="button" value="x²" onclick="typein('xhoch')" style="width: 40px" style="width: 40px"><input type="button" value="←" onclick="typein('del_last')" style="width: 40px" style="width: 40px"><br>
            <input type="button" value="7" onclick="typein(7)" style="width: 40px"><input type="button" value="8" onclick="typein(8)" style="width: 40px"><input type="button" value="9" onclick="typein(9)" style="width: 40px"> <input type="button" value="x" onclick="typein('*')" style="width: 40px;"><input type="button" value="x^y" onclick="typein('xhochy')" style="width: 40px" style="width: 40px"><input type="button" value="π" onclick="typein('pi')" style="width: 40px;"><br>
            <input type="button" value="0" onclick="typein(0)" style="width: 80px"><input type="button" value="," onclick="typein('.')" style="width: 40px"> <input type="button" value=":" onclick="typein('/')" style="width: 40px"><input type="button" value="=" onclick="typein('=')" style="width: 80px;" > <br>    
        </div>

[Nevermind314]

Sehr schönes Feature. Vielleicht ist eine Stellenbegrenzung möglich, denn man kan auch über das Eingabefeld Zahlen schieben. Ansonsten aber sehr gut gelungen. (Wozu die Frage wie viele Stellen bei Pi? Kann man eig. gleich ausgeben.)

MfG

[Potterfans]

Jupp stimmt, die Länge wurde nun auf 20 begrenzt.

Beim Pi habe ich mir gedacht, je nachdem wie genau jemand arbeiten möchte und nun auch speziell bei der Eingabe-Grenze, jenachdem womit man die PI-Zahl rechnen möchte

[nader94]

Gutes Ding.
Wäre gut wenn du das erweitern würdest.
Wenn das größer werden würde, könnte man auch eine Website dazumachen.

[Potterfans]

Welche Funktionen empfindet ihr denn noch als "Lebensnotwenig" für so einen Taschenrechner?

[nader94]

Vllt. schaffst du ja einen Verlauf einzubauen, also das man vorherige
Rechenwege wiederfindet.

[Nevermind314]

Wurzel- und Potenzfunktionen könnten noch nützlich sein.

[Potterfans]

Zitat von Nevermind314

Wurzel- und Potenzfunktionen könnten noch nützlich sein.

Hinzugefügt

[maggins]

@Potterfans

Gibt es eigentlich schon eine erweiterte Version des Taschenrechners? Oder hast du das erstmal auf Eis gelegt ...

[maggins]

Nun gut, da ich eine Fortführung des angefangenen Projekts unterstütze, möchte ich meine Erweiterung des Taschenrechners (v1.1) vorstellen. Vorab noch einige Worte zur ersten Version. Unabhängig davon, dass ich solche Arbeiten, die mitunter sehr viel Zeit in Anspruch nehmen können, schätze, sind mir hier und da kleine "Fehler" aufgefallen (getestet im FF11 und IE8).

- Crossbrowser-Kompatibilität
Dadurch, dass die Stlyes nur für einige Browser (Firefox, Chrome) eingeschränkt wurden, ist die Darstellung des Taschenrechners speziell im IE eher nutzerunfreundlich.

-- Eingabe mehrerer Operatoren
Es ist schon abgefangen worden, dass bei der Eingabe von zwei gleichen Operatoren (++, --, ..) wieder eins gemacht wird. Ein Konflikt entsteht dann, wenn man zwei oder mehr unterschiedliche Operatoren eingibt (*/*+/*).

-- Löschen von Eingaben
Beim zeichenweise Löschen der Anzeige (rückwärts) klappt nach dem letzten Zeichen das DIV zusammen (nur im FF).

-- Fortführen von Rechenoperation
Wenn nach der Ergebnisanzeige (hier: fett) direkt weitere Zahlen eingegeben werden, um damit wieder Berechnungen durchzuführen, erscheint kein Ergebnis mehr.

-- Exception
Ausnahmen wie Überschreiten des Wertebereichs oder Wurzelziehen von negativen Zahlen wird nicht abgefangen.

In der neuen Version habe ich versucht diese Fehler weitestgehend zu beheben, wenngleich gerade das Troubleshooting teilweise sehr zeitaufwendig ist und manchmal das eine oder andere graue Haar zum Vorschein bringt

Noch ein kurze Erläuterung zu aktuellen Version (getestet im FF11 und IE8). Grundsätzlich gibt drei Bereiche:

-- Standardansicht (Grundfunktionalität)
# Zahlenblock (0-9)
# Grundrechenarten
# Löschen der Eingabe (zeichenweise '<-' oder komplett 'C')
# Speichern von Ergebnissen (nur Zahlenwerte möglich) MS - Lesen des Speichers MR - Löschen des Speichers MC
>> die bekannte Memory-Funktion vom handelsüblichen Taschenrechner

-- weitere Funktionen (ein-/ausblendbar)
# ersten Wert einer Rechenoperation als Negativen darstellen
# Quadrat, Wurzel, XhochY, 1/x
>> Sind aus Rechenoperationen oder aus einem reinen Zahlenwert berechenbar. Hierbei werden die Ergebnisse sofort ohne = Bestätigung angezeigt.
# Pi
>> als Teil einer Rechenoperation einsetzbar, überschreibt reine Zahlenwerte in der Anzeige

-- Verlauf (ein-/ausblendbar)
# Anzeigen jeglicher durchgeführter Berechnungen (Rechenwege und Ergebnis)
# Info-Anzeige beim Speichern, fehlerhafte Eingaben, Überschreiten von Wertebereichen

Am Besten man schaut es sich mal live an: Taschenrechner v1.1

In einigen Situationen werden nächstmögliche Schritte rot gekennzeichnet:
# Anzeige von - TILT -, Speicher von Zahlenwerten, Löschen des Verlaufs

Jegliche Art von Kritik ist erwünscht. Ein recht schwieriger Punkt in der "Programmentwicklung" ist neben der Funktionalität & Troubleshooting auch eine solide Nutzerfreundlichkeit herzustellen. Daher wäre es auch wichtig darüber ein Feedback zu bekommen. Man kann es sicherlich nicht jeden Recht machen. Aber man kann's versuchen

Es würde mich auch freuen, wenn Interessierte ein wenig Zeit mit nem Blick in den Quellcode investieren könnten. Jegliche Fragen sind willkommen. Ziel ist es das Tool zu optimieren und je nach Bedarf zu erweitern. Von Vorteil sind sämtliche (auch irrationale) Eingaben zu versuchen, um sog. Bugs ausfindig zu machen.

Also, viel Spaß!