Как создать калькулятор с помощью HTML
Если вам нужен быстрый и простой калькулятор с базовыми функциями, такими как сложение, вычитание, умножение и деление, просто используйте код ниже. Вы можете вставить HTML-код этого калькулятора в свой HTML-файл и проверить, как все работает. Код содержит комментарии, чтобы вы могли понять, как все работает, и внести изменения в стиль и макет этого приложения.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Простой калькулятор</title> <style> /* Стиль для всего текста, центрирование калькулятора */ body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; } /* Стиль для контейнера калькулятора */ .calculator { background-color: white; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } /* Стиль для области отображения */ .display { width: 160px; height: 40px; text-align: right; margin-bottom: 10px; font-size: 1.5em; padding: 5px; } /* Сетка для кнопок калькулятора */ .buttons { display: grid; grid-template-columns: repeat(4, 40px); gap: 10px; } /* Стиль для кнопок */ .buttons button { width: 40px; height: 40px; font-size: 1.2em; border: none; background-color: #4CAF50; color: white; border-radius: 5px; cursor: pointer; } /* Эффект наведения для кнопок */ .buttons button:hover { background-color: #45a049; } /* Специальный стиль для кнопки "равно" */ .buttons .equals { grid-column: span 2; /* Охватывает 2 столбца */ background-color: #2196F3; } /* Эффект наведения для кнопки "равно" */ .buttons .equals:hover { background-color: #0b7dda; } </style></head><body> <div class="calculator"> <!-- Поле ввода для отображения результатов калькулятора --> <input type="text" class="display" id="display" disabled> <!-- Кнопки калькулятора, расположенные в сетке --> <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> /* Переменные для хранения текущего ввода, предыдущего ввода и оператора */ let currentInput = ''; let Operator = ''; let previousInput = ''; /* Функция для добавления чисел к текущему вводу */ function appendNumber(number) { currentInput += number; // Добавить нажатое число к текущему вводу document.getElementById('display').value = currentInput; // Обновить отображение } /* Функция для установки оператора и подготовки к следующему вводу */ function setOperator(op) { Operator = op; // Сохранение выбранного оператора previousInput = currentInput; // Сохранение текущего ввода как предыдущего currentInput = ''; // Очистка текущего ввода для следующего числа } /* Функция для выполнения вычисления на основе оператора */ function calculate() { let result; // Выполнить соответствующую операцию на основе оператора 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; // Отобразить результат currentInput = result.toString(); // Сохраните результат как новый текущий ввод Operator = ''; // Сброс оператора } /* Функция очистки дисплея и сброса калькулятора */ function clearDisplay() { currentInput = ''; previousInput = ''; Operator = ''; document.getElementById('display').value = ''; // Очистить дисплей } </script></body></html>Объяснение основных разделов
Чтобы помочь вам управлять калькулятором и настраивать его, мы написали несколько дополнительных руководств по его функциям:
Структура HTML
- Калькулятор находится внутри элемента div с классом calculator.
- Элемент input используется в качестве дисплея для калькулятора и отключен, поэтому пользователи не могут вводить данные вручную.
- Кнопки организованы в виде сетки внутри div buttons и расположены так, чтобы напоминать калькулятор.
Стилизация CSS
- Тело страницы стилизовано так, что калькулятор центрирован по вертикали и горизонтали.
- Сам калькулятор имеет белый фон с закругленными углами и тенью, что придает ему вид карты.
- Клавиши разработаны с постоянным размером, цветом и эффектом наведения для визуальной обратной связи.
Функциональность JavaScript
- appendNumber() добавляет числа на дисплей, когда пользователь нажимает клавишу.
- setOperator() сохраняет выбранный оператор (+, -, *, /) и сохраняет текущий ввод как предыдущий ввод.
- calculate() выполняет соответствующую математическую операцию на основе выбранного оператора и отображает результат.
- clearDisplay() сбрасывает калькулятор, очищая все вводимые данные и дисплей.
Это простой калькулятор, использующий только базовые HTML, CSS и JS. Поэтому его внешний вид и функции довольно ограничены.
Как создать калькулятор для сложных задач
Наш простой HTML-калькулятор выше подходит для базовых вычислений и имеет чистый, функциональный дизайн. Он подходит для небольших задач или в качестве практического проекта при изучении программирования. Но для профессиональных или более сложных расчетов вам может понадобиться более продвинутое решение. Планируете ли вы семейный бюджет или организуете поездку, расширенные функции расчетов могут иметь большое значение. Какие есть варианты?
Узнать больше о программировании
Лучший способ справиться с более сложными проектами — глубже изучить HTML, CSS и JavaScript. Обладая продвинутыми знаниями, вы можете создавать расчеты с несколькими полями, параметрами, условиями и переменными. На этом этапе ваши навыки программирования выходят далеко за рамки простого создания HTML-калькулятора. Это долгий путь, но он того стоит.
Попробуйте виджет калькулятора без кода для HTML
Если ваши навыки кодирования еще не продвинуты и вам нужно мощное решение прямо сейчас, есть хорошие новости. Вы можете создать пользовательский виджет калькулятора в HTML без каких-либо знаний кодирования. Вы можете добавлять многочисленные пользовательские поля, настраивать условия и называть все понятно. Просто протестируйте его в редакторе ниже, прежде чем продолжить.
Создание виджета калькулятора HTML: кодирование не требуется
В этом разделе мы подробно расскажем, как создать свой собственный виджет калькулятора HTML. Его также можно легко встроить в любой веб-сайт, и он будет работать сразу после установки. Давайте посмотрим, как это работает.
- Выберите подходящий шаблон. Вы можете продолжить в редакторе выше или просмотреть наш список предопределенных шаблонов калькуляторов и выбрать подходящее решение для вашего случая.
- Добавить Добавьте необходимые поля. Виджет предлагает ползунки, числа, варианты выбора, раскрывающиеся списки и другие поля для точного представления вашего сценария.
- Настройте дизайн. Используйте вкладку «Стиль» в редакторе, чтобы настроить калькулятор в соответствии со своим вкусом, брендом или цветами веб-сайта.
- Настройте больше параметров. Перейдите на вкладку «Настройки», чтобы завершить настройку виджета, установить разделители и определить больше правил для калькулятора. Если у вас есть собственные идеи HTML и JS, вы можете вставить их туда.
- Сохраните и используйте. Как только вы будете удовлетворены результатом, опубликуйте свой виджет, чтобы получить HTML-код вашего калькулятора. У вас будет несколько строк кода, которые можно вставить на любую платформу веб-сайта.
На одном веб-сайте вы можете использовать этот HTML-виджет калькулятора столько, сколько захотите. Планируйте свои расходы или сбережения, используйте их для продвижения своих коммерческих услуг или добавления интерактивности в свой блог. Теперь вы можете прочитать краткие руководства по добавлению вашего калькулятора на самые популярные платформы CMS или найти свой конструктор сайтов в списке платформ.
Примеры калькуляторов в HTML
Вот несколько примеров калькуляторов, которые вы можете создать самостоятельно всего за 5-10 минут без каких-либо знаний в области кодирования. Подумайте о своем варианте использования и постарайтесь включить все идеи в форму калькулятора в редакторе.
Ипотечный калькулятор
Помогите пользователям легко рассчитать ежемесячные ипотечные платежи на основе суммы кредита, процентной ставки и срока. Попробуйте наш настраиваемый калькулятор ипотеки.
Калькулятор окупаемости инвестиций
Позвольте компаниям легко рассчитать потенциальную окупаемость своих инвестиций. Ознакомьтесь с нашим шаблоном калькулятора рентабельности инвестиций.
Калькулятор ИМТ
Рассчитайте индекс массы тела на основе роста и веса, чтобы получить ценную информацию о здоровье. Начните работу с нашим калькулятором ИМТ.
Заключительные мысли
Вкратце, мы показали вам, как создать простой HTML-калькулятор, включая готовый код для начала работы. Хотя это идеально подходит для базовых задач и учебных целей, для сложных расчетов и сложных сценариев лучшим выбором будет универсальный виджет.
Наш виджет легко интегрируется в любой веб-сайт и охватывает широкий спектр популярных вариантов использования, предлагая расширенную функциональность и гибкость. Если вам нужно управлять финансами или выполнять сложные вычисления, наше решение предоставит вам необходимые инструменты.
Редактор: создайте бесплатный HTML-калькулятор
Готовы создать свой собственный HTML-калькулятор и открыть для себя все его функции? Попробуйте Редактор калькулятора, чтобы увидеть виджет в действии!
Свяжитесь с нами
Мы надеемся, что это руководство было для вас полезным! Если вы хотите создать собственный калькулятор для своего сайта, не стесняйтесь связаться с нами. Наша миссия в Elfsight — предоставить вам легкий и успешный опыт работы с нашими виджетами без кода.
Станьте частью нашего яркого сообщества, где постоянно обмениваются идеями и идеями. Мы открыты для ваших предложений по улучшению — просто добавьте их в наш список пожеланий!
