Przykład prostego kalkulatora z podstawowymi operacjami matematycznymi: dodawanie, odejmowanie, mnożenie i dzielenie.
Rozwiązanie:
|
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 |
<!DOCTYPE html> <html> <head> <title>Kalkulator</title> <meta charset="utf-8" /> <style type="text/css"> #calculator { background: #eaeaea; margin: 0 auto; padding: 35px 25px 35px 25px; width: 200px; text-align: center; } #calculator button { padding: 10px; width: 40px; } #calculator input[type="text"] { padding: 10px; width: 147px; margin-bottom: 5px; } </style> <script> function Calculator(operator) { var a = document.getElementById('a').value; var b = document.getElementById('b').value; switch(operator) { case '+': var result = parseFloat(a) + parseFloat(b); break; case '-': var result = parseFloat(a) - parseFloat(b); break; case 'x': var result = parseFloat(a) * parseFloat(b); break; case '/': var result = parseFloat(a) / parseFloat(b); break; } document.getElementById('result').value = '= ' + result; } </script> </head> <body> <form id="calculator"> <input type="text" id="a" placeholder="a" /> <input type="text" id="b" placeholder="b" /> <input type="text" id="result" placeholder="=" disabled="disabled" /> <button type="button" onclick="Calculator(this.innerHTML)">+</button> <button type="button" onclick="Calculator(this.innerHTML)">-</button> <button type="button" onclick="Calculator(this.innerHTML)">x</button> <button type="button" onclick="Calculator(this.innerHTML)">/</button> </form> </body> </html> |
Formularz składa się z trzech pól tekstowych (<input type=”text” />): a i b – do wprowadzania wartości liczbowych oraz result , w którym wyświetlane są wyniki operacji matematycznych.
Każdy przycisk (button) reaguje na zdarzenie onClick (kliknięcie), które uruchamia funkcję Calculator. Funkcja pobiera tekst z klikniętego przycisku np: “+” za pomocą this.innerHTML. Instrukcja warunkowa switch sprawdza, który przycisk został kliknięty i wykonuje odpowiednią operację matematyczną. Funkcja parseFloat przetwarza łańcuch znaków (z pól tekstowych) i zwraca liczbę zmiennoprzecinkową.
Zobacz również: “PRZYKŁAD KALKULATORA W REACT JS”
