Jak stworzyć kalkulator za pomocą HTML
Jeśli potrzebujesz szybkiego i prostego kalkulatora z podstawowymi funkcjami, takimi jak dodawanie, odejmowanie, mnożenie i dzielenie, skorzystaj z poniższego kodu. Możesz wkleić ten kod HTML kalkulatora do swojego pliku HTML i sprawdzić, jak wszystko działa. Kod zawiera komentarze, które pomogą Ci zrozumieć działanie oraz wprowadzić zmiany w stylu i układzie aplikacji.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Prosty kalkulator</title> <style> /* Styl dla całego ciała strony, centrowanie kalkulatora */ body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; } /* Styl dla kontenera kalkulatora */ .calculator { background-color: white; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } /* Styl dla pola wyświetlacza */ .display { width: 160px; height: 40px; text-align: right; margin-bottom: 10px; font-size: 1.5em; padding: 5px; } /* Układ siatki dla przycisków kalkulatora */ .buttons { display: grid; grid-template-columns: repeat(4, 40px); gap: 10px; } /* Styl dla przycisków */ .buttons button { width: 40px; height: 40px; font-size: 1.2em; border: none; background-color: #4CAF50; color: white; border-radius: 5px; cursor: pointer; } /* Efekt najechania na przyciski */ .buttons button:hover { background-color: #45a049; } /* Specjalny styl dla przycisku równa się */ .buttons .equals { grid-column: span 2; /* Zajmuje 2 kolumny */ background-color: #2196F3; } /* Efekt najechania na przycisk równa się */ .buttons .equals:hover { background-color: #0b7dda; } </style></head><body> <div class="calculator"> <!-- Pole wejściowe do wyświetlania wyników kalkulatora --> <input type="text" class="display" id="display" disabled> <!-- Przyciski kalkulatora ułożone w siatkę --> <div class="buttons"> <button onclick="appendNumber('1')">1</button> <button onclick="appendNumber('2')">2</button> <button onclick="appendNumber('3')">3</button> <button onclick="setOperator('+')">+</button> <button onclick="appendNumber('4')">4</button> <button onclick="appendNumber('5')">5</button> <button onclick="appendNumber('6')">6</button> <button onclick="setOperator('-')">-</button> <button onclick="appendNumber('7')">7</button> <button onclick="appendNumber('8')">8</button> <button onclick="appendNumber('9')">9</button> <button onclick="setOperator('*')">*</button> <button onclick="clearDisplay()">C</button> <button onclick="appendNumber('0')">0</button> <button onclick="calculate()" class="equals">=</button> <button onclick="setOperator('/')">/</button> </div> </div> <script> /* Zmienne do przechowywania bieżącego i poprzedniego wejścia oraz operatora */ let currentInput = ''; let operator = ''; let previousInput = ''; /* Funkcja dodająca liczby do bieżącego wejścia */ function appendNumber(number) { currentInput += number; // Dodaj klikniętą cyfrę do bieżącego wejścia document.getElementById('display').value = currentInput; // Aktualizuj wyświetlacz } /* Funkcja ustawiająca operator i przygotowująca na kolejne wejście */ function setOperator(op) { operator = op; // Zapisz wybrany operator previousInput = currentInput; // Zapisz bieżące wejście jako poprzednie currentInput = ''; // Wyczyść bieżące wejście na kolejną liczbę } /* Funkcja wykonująca obliczenia na podstawie operatora */ function calculate() { let result; // Wykonaj odpowiednią operację w zależności od operatora if (operator === '+') { result = parseFloat(previousInput) + parseFloat(currentInput); } else if (operator === '-') { result = parseFloat(previousInput) - parseFloat(currentInput); } else if (operator === '*') { result = parseFloat(previousInput) * parseFloat(currentInput); } else if (operator === '/') { result = parseFloat(previousInput) / parseFloat(currentInput); } document.getElementById('display').value = result; // Wyświetl wynik currentInput = result.toString(); // Zapisz wynik jako nowe bieżące wejście operator = ''; // Zresetuj operator } /* Funkcja czyszcząca wyświetlacz i resetująca kalkulator */ function clearDisplay() { currentInput = ''; previousInput = ''; operator = ''; document.getElementById('display').value = ''; // Wyczyść wyświetlacz } </script></body></html>Wyjaśnienie kluczowych sekcji
Aby ułatwić zarządzanie i dostosowanie kalkulatora, przygotowaliśmy dodatkowe wskazówki dotyczące jego funkcji:
Struktura HTML
- Kalkulator znajduje się w elemencie div o klasie calculator.
- Element input służy jako wyświetlacz kalkulatora i jest wyłączony, aby użytkownicy nie mogli wpisywać danych ręcznie.
- Przyciski są ułożone w siatkę w divie o klasie buttons, tworząc układ przypominający kalkulator.
Stylizacja CSS
- Body strony jest stylizowane tak, aby kalkulator był wyśrodkowany pionowo i poziomo.
- Kalkulator ma białe tło, zaokrąglone rogi i cień, co nadaje mu wygląd karty.
- Przyciski mają jednolity rozmiar, kolor i efekt podświetlenia przy najechaniu, co poprawia interakcję wizualną.
Funkcjonalność JavaScript
- appendNumber() dodaje cyfry do wyświetlacza po kliknięciu przycisku.
- setOperator() zapisuje wybrany operator (+, -, *, /) i przechowuje bieżące wejście jako poprzednie.
- calculate() wykonuje odpowiednie działanie matematyczne na podstawie wybranego operatora i pokazuje wynik.
- clearDisplay() resetuje kalkulator, czyszcząc wszystkie dane i wyświetlacz.
To prosty kalkulator wykorzystujący podstawowe HTML, CSS i JS, dlatego jego wygląd i możliwości są ograniczone.
Jak zrobić kalkulator do złożonych zadań
Nasz prosty kalkulator HTML powyżej sprawdza się przy podstawowych operacjach i ma przejrzysty, funkcjonalny design. Nadaje się do zabawy lub śledzenia postępów w nauce programowania. Jednak do profesjonalnych lub bardziej skomplikowanych zadań potrzebujesz czegoś bardziej zaawansowanego. Niezależnie czy planujesz budżet domowy, czy organizujesz wyjazd, rozbudowane funkcje kalkulacji mogą zrobić dużą różnicę. Jakie masz więc opcje?
Naucz się więcej kodowania
Najlepszym sposobem na realizację bardziej złożonych projektów jest pogłębienie wiedzy z HTML, CSS i JavaScript. Dzięki temu stworzysz kalkulacje z wieloma polami, opcjami, warunkami i zmiennymi. Twoje umiejętności programistyczne wykraczają wtedy daleko poza prosty kalkulator HTML. To długa droga do przebycia.
Wypróbuj widżet kalkulatora bez kodowania
Jeśli Twoje umiejętności kodowania nie są jeszcze zaawansowane, a potrzebujesz teraz potężnego rozwiązania, mamy dla Ciebie dobrą wiadomość. Możesz stworzyć własny widżet kalkulatora w HTML bez żadnej znajomości kodowania. Dodasz wiele pól, dostosujesz warunki i nazwiesz wszystko jasno pod swój scenariusz. Przetestuj go w edytorze poniżej, zanim przejdziemy dalej.
Tworzenie widżetu kalkulatora HTML bez kodowania
W tej części opiszemy szczegółowo, jak stworzyć własny widżet kalkulatora HTML. Można go łatwo osadzić na dowolnej stronie internetowej i od razu działa. Zobaczmy, jak to wygląda w praktyce.
- Wybierz odpowiedni szablon. Możesz kontynuować w edytorze, który widziałeś powyżej, lub przejrzeć naszą listę gotowych szablonów kalkulatorów i wybrać ten, który najlepiej pasuje do Twojej sytuacji.
- Dodaj wymagane pola. Widżet oferuje suwaki, liczby, wybory, listy rozwijane i inne pola, które pomogą dokładnie odwzorować Twój scenariusz.
- Dostosuj styl. Skorzystaj z zakładki „Styl” w edytorze, aby ozdobić kalkulator, dopasować go do swojego gustu, marki lub kolorów strony.
- Dopasuj pozostałe ustawienia. Odwiedź zakładkę „Ustawienia”, aby sfinalizować widżet, ustawić separatory i inne reguły dla kalkulatora. Możesz tam też dodać własny kod HTML i JS, jeśli masz takie pomysły.
- Zapisz i zacznij korzystać. Gdy będziesz zadowolony z efektu, opublikuj widżet, aby uzyskać kod HTML kalkulatora. Otrzymasz kilka linijek, które możesz dodać na dowolną platformę strony.
Na stronie możesz korzystać z tego widżetu kalkulatora HTML tak długo, jak potrzebujesz. Planuj wydatki lub oszczędności, promuj swoje usługi lub dodaj interaktywność do bloga. Możesz też przeczytać krótkie instrukcje o dodawaniu kalkulatora do najpopularniejszych CMS lub znaleźć swój kreator stron na liście platform.
Przykłady kalkulatorów w HTML
Oto kilka przykładów, które możesz samodzielnie stworzyć bez kodowania w zaledwie 5-10 minut. Pamiętaj o swoim zastosowaniu i postaraj się uwzględnić wszystkie pomysły w formularzu kalkulatora podczas pracy w edytorze.
Kalkulator hipoteczny
Pomoż użytkownikom łatwo oszacować miesięczne raty kredytu hipotecznego na podstawie kwoty pożyczki, oprocentowania i okresu spłaty. Wypróbuj nasz konfigurowalny kalkulator hipoteczny.
Kalkulator ROI
Umożliw firmom łatwe obliczanie potencjalnych zwrotów z inwestycji. Sprawdź nasz szablon kalkulatora ROI.
Kalkulator BMI
Oblicz wskaźnik masy ciała na podstawie wzrostu i wagi, aby uzyskać cenne informacje zdrowotne. Zacznij tworzyć z naszym kalkulatorem BMI.
Podsumowanie
Podsumowując, pokazaliśmy, jak stworzyć prosty kalkulator HTML wraz z gotowym kodem, który pomoże Ci zacząć. To idealne rozwiązanie do podstawowych zadań i nauki, ale do bardziej zaawansowanych obliczeń i skomplikowanych scenariuszy lepszy będzie wszechstronny widżet.
Nasz widżet łatwo integruje się z każdą stroną i obsługuje wiele popularnych zastosowań, oferując rozszerzoną funkcjonalność i elastyczność. Niezależnie czy zarządzasz finansami, czy wykonujesz bardziej złożone kalkulacje, nasze rozwiązanie dostarczy Ci potrzebnych narzędzi.
Edytor: Stwórz kalkulator HTML za darmo
Gotowy, by stworzyć własny, spersonalizowany kalkulator HTML i poznać wszystkie funkcje? Wypróbuj edytor kalkulatora na stronie, aby zobaczyć widżet w akcji!
Kontakt
Mamy nadzieję, że ten przewodnik był dla Ciebie pomocny! Jeśli chcesz stworzyć własny kalkulator na stronę, śmiało skontaktuj się z nami. Naszą misją w Elfsight jest zapewnienie Ci łatwego i skutecznego doświadczenia dzięki naszym widżetom bez kodowania.
Dołącz do naszej aktywnej Społeczności, gdzie nieustannie dzielimy się pomysłami i spostrzeżeniami. Jesteśmy otwarci na Twoje sugestie ulepszeń — dodaj je do naszej Listy życzeń!
