Taschenrechner für deine Website

Du kannst diesen Rechner kostenlos auf deiner eigenen Website verwenden. Lade die Quelldateien des Taschenrechners herunter oder kopiere den folgenden HTML-Code und füge ihn in deine Website oder deinen Blog ein. Die ZIP-Datei enthält alle zugehörigen Dateien, um den Taschenrechner lokal auf deinem Computer oder auf deinem Webserver auszuführen.

Taschenrechner HTML-Code

<!--
The MIT License (MIT)

Permission is hereby granted, free of charge, to any person obtaining a copy 
of this software and associated documentation files (the "Software"), to deal 
in the Software without restriction, including without limitation the rights 
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 
copies of the Software, and to permit persons to whom the Software is 
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all 
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-->

<link href="https://mczak.com/code/calculator/css/calculator.css" rel="stylesheet" />

<div class="calculator">
 <div class="u4 display">
  <div class="display-inner">
   <div class="display-text" data-bind="text: display">
   </div>
  </div>
 </div>

<button id="calculator-button-c" class="u1 calcbutton button-red" data-bind="click: clear">c</button>
 <button id="calculator-button-backspace" class="u1 calcbutton button-backspace button-gray" data-bind="click: backspace">⇤</button>
 <button id="calculator-button-negate" class="u1 calcbutton button-gray" data-bind="click: negate">±</button>
 <button id="calculator-button-รท" class="u1 calcbutton button-gray" data-bind="click: operator">÷</button>
 <button id="calculator-button-7" class="u1 calcbutton button-gray" data-bind="click: number">7</button>
 <button id="calculator-button-8" class="u1 calcbutton button-gray" data-bind="click: number">8</button>
 <button id="calculator-button-9" class="u1 calcbutton button-gray" data-bind="click: number">9</button>
 <button id="calculator-button-x" class="u1 calcbutton button-gray" data-bind="click: operator">x</button>
 <button id="calculator-button-4" class="u1 calcbutton button-gray" data-bind="click: number">4</button>
 <button id="calculator-button-5" class="u1 calcbutton button-gray" data-bind="click: number">5</button>
 <button id="calculator-button-6" class="u1 calcbutton button-gray" data-bind="click: number">6</button>
 <button id="calculator-button--" class="u1 calcbutton button-gray" data-bind="click: operator">-</button>
 <button id="calculator-button-1" class="u1 calcbutton button-gray" data-bind="click: number">1</button>
 <button id="calculator-button-2" class="u1 calcbutton button-gray" data-bind="click: number">2</button>
 <button id="calculator-button-3" class="u1 calcbutton button-gray" data-bind="click: number">3</button>
 <button id="calculator-button-+" class="u1 calcbutton button-gray" data-bind="click: operator">+</button>
 <button id="calculator-button-0" class="u2 calcbutton button-gray" data-bind="click: number">0</button>
 <button id="calculator-button-." class="u1 calcbutton button-gray" data-bind="click: number">.</button>
 <button id="calculator-button-=" class="u1 calcbutton button-blue" data-bind="click: operator">=</button>            
 <a href="https://mczak.com/de/code/calculator/" target="_blank">Taschenrechner für deine Website</a>
</div>

// Helper variable declarations
    var self = this,
        decimalMark = ".",
        sum = 0,
        prevOperator;

// Define default values
    self.display = ko.observable("0");
    self.isShowingResult = ko.observable(false);

// Callback for each number button
    self.number = function (item, event) {   
        var button = event.target.innerText || event.target.textContent;

// If a result has been shown, make sure we
        // clear the display before displaying any new numbers
        if (self.isShowingResult()) {
            self.clearDisplay();
            self.isShowingResult(false);
        }

// Make sure we only add one decimal mark
        if (button == decimalMark && self.display().indexOf(decimalMark) > -1)
            return;

// Make sure that we remove the default 0 shown on the display
        // when the user press the first number button
        var newValue = (self.display() === "0" && button != decimalMark) ? button : self.display() + button; 
        // Update the display
        self.display(newValue);

};

// Callback for each operator button
    self.operator = function (item, event) {
        var button = event.target.innerText || event.target.textContent;
        // Only perform calculation if numbers
        // has been entered since last operator button was pressed
        if (!self.isShowingResult()) {
            // Perform calculation
            switch (prevOperator) {
                case "+":
                    sum = sum + parseFloat(self.display(), 10);
                    break;
                case "-":
                    sum = sum - parseFloat(self.display(), 10);
                    break;
                case "x":
                    sum = sum * parseFloat(self.display(), 10);
                    break;
                case "÷":
                    sum = sum / parseFloat(self.display(), 10);
                    break;
                default:
                    sum = parseFloat(self.display(), 10);
            };
      }

// Avoid showing a result until you have at least
        // two terms to perform calculation on
        if (prevOperator)
            self.display(sum);

// Make sure we don't try to calculate with the equal sign
        prevOperator = (button === "=") ? null : button;
        // Always set the calculator into showing result state 
        // after an operator button has been pressed
        self.isShowingResult(true);
    };

// Callback for negating a number
    self.negate = function () {
        // Disable the negate button when showing a result
        if (self.isShowingResult() || self.display() === "0")
            return;

var newValue = (self.display().substr(0, 1) === "-") ? self.display().substr(1) : "-" + self.display();
        self.display(newValue);
    };

// Callback for each backspace button
    self.backspace = function (item, event) {
        // Disable backspace if the calculator is shown a result
        if (self.isShowingResult())
            return;

// Remove the last character, and make the display zero when
        // last character is removed
        if (self.display().length > 1) {
            self.display(self.display().substr(0, self.display().length - 1));
        } else {
            self.clearDisplay();
        }
    };

// Clear the entire calculator
    self.clear = function () {
        prevOperator = null;
        self.clearDisplay();
        sum = 0;
    };

// Clear just the display
    self.clearDisplay = function () {
        self.display("0");
    };
};

// Apply knockout bindings
ko.applyBindings(new Calculator());

// Enable keyboard controll
(function () {
    // Key codes and their associated calculator buttons
    var calculatorKeys = {
        48: "0", 49: "1", 50: "2", 51: "3", 52: "4", 53: "5", 54: "6",
        55: "7", 56: "8", 57: "9", 96: "0", 97: "1", 98: "2", 99: "3",
        100: "4", 101: "5", 102: "6", 103: "7", 104: "8", 105: "9",
        106: "x", 107: "+", 109: "-", 110: ".", 111: "÷", 8: "backspace",
        13: "=", 46: "c", 67: "c"
    };

// Helper function to fire an event on an element
    function fireEvent(element, event) {
        if (document.createEvent) {
            // Dispatch for firefox + others
            var evt = document.createEvent("HTMLEvents");
            evt.initEvent(event, true, true);
            return !element.dispatchEvent(evt);
        } else {
            // Dispatch for IE
            var evt = document.createEventObject();
            return element.fireEvent('on' + event, evt)
        }
    }

// Helper functions to add/remove HTML-element classes
    // as IE didn't support the classList property prior to IE10
    function hasClass(ele, cls) {
        return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
    }

function addClass(ele, cls) {
        if (!hasClass(ele, cls)) ele.className += " " + cls;
    }

function removeClass(ele, cls) {
        if (hasClass(ele, cls)) {
            var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
            ele.className = ele.className.replace(reg, ' ');
        }
    }

// Callback for every key stroke
    var keycallback = function (e) {
        // Check if the key was one of our calculator keys
        if (e.keyCode in calculatorKeys) {
            // Get button-element associated with key
            var element = document.getElementById("calculator-button-" + calculatorKeys[e.keyCode]);
            // Simulate button click on keystroke
            addClass(element, "active");
            setTimeout(function () { removeClass(element, "active"); }, 100);
            // Fire click event
            fireEvent(element, "click");
        }
    }

// Attach a keyup-event listener on the document
    if (document.addEventListener) {
        document.addEventListener('keyup', keycallback, false);
    } else if (document.attachEvent) {
        document.attachEvent('keyup', keycallback);
    }

})();
</script>

Wenn dieser HTML-Code auf deiner Website nicht funktioniert, kannst du die dazugehörigen Dateien herunterladen und ändern oder die IFrame-Version ausprobieren.

IFrame-Code

Zusätzliche Quellen und Informationen

Der auf dieser Seite vorgestellte Code basiert auf einer Taschenrechner-Software, die von Ideaviate AB auf der Software-Plattform GitHub veröffentlicht wurde. In dieser Rechner-Software kommt die Javascript-Bibliothek Knockout zum Einsatz.

Alle drei Quellen wurden im Rahmen der MIT-Lizenz veröffentlicht und können daher kostenlos heruntergeladen und genutzt werden.