В этом руководстве мы рассмотрим процесс создания простого калькулятора с использованием базовых технологий веб-разработки: HTML, CSS и JavaScript. Калькулятор будет иметь строгий и современный дизайн, а также поддержку основных арифметических операций. Мы шаг за шагом пройдёмся по созданию интерфейса, стилям и логике работы приложения.
Шаг 1: Создание структуры HTML
Начнём с базовой разметки HTML, которая будет служить каркасом для нашего калькулятора. Создайте файл index.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> /* Здесь будут наши стили */ </style> </head> <body> <div class="calculator"> <input type="text" id="display" disabled /> <div class="buttons"> <button onclick="addToDisplay('7')">7</button> <button onclick="addToDisplay('8')">8</button> <button onclick="addToDisplay('9')">9</button> <button onclick="addToDisplay('+')">+</button> <button onclick="addToDisplay('4')">4</button> <button onclick="addToDisplay('5')">5</button> <button onclick="addToDisplay('6')">6</button> <button onclick="addToDisplay('-')">-</button> <button onclick="addToDisplay('1')">1</button> <button onclick="addToDisplay('2')">2</button> <button onclick="addToDisplay('3')">3</button> <button onclick="addToDisplay('*')">×</button> <button onclick="addToDisplay('.')">.</button> <button onclick="addToDisplay('0')">0</button> <button onclick="calculateResult()" id="equals">=</button> <button onclick="addToDisplay('/')">÷</button> <button onclick="clearDisplay()" id="clear">C</button> </div> </div> <script> /* Здесь будет наша логика на JavaScript */ </script> </body> </html>
Разбор HTML-кода
<input type="text" id="display" disabled />: Поле ввода, где будут отображаться текущие вычисления и результат. Атрибутdisabledзапрещает прямое редактирование пользователем.<div class="buttons">: Контейнер для кнопок калькулятора. Внутри него находятся кнопки с цифрами и операторами.<button onclick="addToDisplay('7')">7</button>: Кнопка, которая при нажатии вызывает функциюaddToDisplay()с аргументом ‘7’.<button onclick="calculateResult()" id="equals">=</button>: Кнопка равенства, которая запускает функциюcalculateResult().<button onclick="clearDisplay()" id="clear">C</button>: Кнопка очистки, которая сбрасывает текущее состояние калькулятора.
Шаг 2: Стилизация калькулятора с помощью CSS
Добавьте следующие стили внутрь тега <style>:
/* Общие стили */ body { font-family: Arial, sans-serif; background-color: #333; color: white; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .calculator { background-color: #222; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); display: inline-block; } #display { width: 210px; padding: 10px; font-size: 24px; text-align: right; background-color: #888; color: white; border: none; outline: none; margin-bottom: 15px; } .buttons { display: grid; grid-template-columns: repeat(4, 50px); gap: 10px; } button { padding: 10px; font-size: 18px; cursor: pointer; border: none; background-color: #555; color: white; transition: background-color 0.2s ease-in-out; } button:hover { background-color: #666; } #equals, #clear { background-color: #007bff; } #equals:hover, #clear:hover { background-color: #0056b3; }
Разбор CSS-кода
body: Задаёт общие стили для всего документа, включая шрифт, цвет фона и центрирование содержимого..calculator: Определяет внешний вид основного блока калькулятора: тёмный фон, скруглённые углы и лёгкая тень.#display: Настраивает поле ввода: ширина, высота, цвет фона, цвет текста и отсутствие рамки..buttons: Используется CSS Grid для равномерного расположения кнопок в четыре столбца с одинаковыми размерами.button: Определяет общий стиль для всех кнопок: отсутствие границ, цвет фона, цвет текста и эффект при наведении курсора.#equals, #clear: Специальная стилизация для кнопок равенства и очистки, чтобы они отличались от других кнопок.
Шаг 3: Логика работы калькулятора на JavaScript
Теперь добавим функциональность нашему калькулятору с помощью JavaScript. Поместите следующий код внутрь тега <script>:
let displayText = document.getElementById('display'); // Добавляет символ в поле ввода function addToDisplay(symbol) { let currentValue = displayText.value; if (currentValue === '0' || currentValue === 'Ошибка') { displayText.value = symbol; } else { displayText.value += symbol; } } // Выполняет вычисления function calculateResult() { try { let result = eval(displayText.value); displayText.value = result.toString(); } catch (error) { displayText.value = 'Ошибка'; } } // Очищает поле ввода function clearDisplay() { displayText.value = '0'; } // Обрабатываем нажатие клавиш на клавиатуре window.addEventListener('keydown', function(event) { const key = event.key; switch(key) { case '0': case '1': case '2': case '3': case '4': case '5': case '6': case '7': case '8': case '9': addToDisplay(key); break; case '+': case '-': case '*': case '/': addToDisplay(key); break; case '.': addToDisplay('.'); break; case 'Enter': calculateResult(); break; case 'Backspace': clearDisplay(); break; default: return; // Игнорируем остальные клавиши } // Фокусировка на элементе ввода displayText.focus(); });
Разбор JavaScript-кода
let displayText = document.getElementById('display');: Получение ссылки на элемент поля ввода.addToDisplay(symbol): Функция добавляет переданный символ в поле ввода. Если текущее значение равно «0» или «Ошибка», оно заменяется новым символом, иначе символ добавляется к существующему значению.calculateResult(): Функция пытается вычислить выражение, введённое пользователем, с помощьюeval(). Если вычисление прошло успешно, результат выводится в поле ввода, иначе отображается сообщение «Ошибка».clearDisplay(): Простая функция, которая очищает содержимое поля ввода, устанавливая его значение обратно в «0».- Обработчик события
keydown: Реагирует на нажатия клавиш на клавиатуре. В зависимости от нажатой клавиши выполняются различные действия: добавление символов, выполнение вычислений или очистка дисплея.
Полный код калькулятора
Вот полный код калькулятора, объединяющий всё вышеописанное:
<!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; background-color: #333; color: white; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .calculator { background-color: #222; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); display: inline-block; } #display { width: 210px; padding: 10px; font-size: 24px; text-align: right; background-color: #888; /* Изменен цвет фона */ color: white; /* Изменен цвет текста */ border: none; outline: none; margin-bottom: 15px; } .buttons { display: grid; grid-template-columns: repeat(4, 50px); gap: 10px; } button { padding: 10px; font-size: 18px; cursor: pointer; border: none; background-color: #555; color: white; transition: background-color 0.2s ease-in-out; } button:hover { background-color: #666; } #equals, #clear { background-color: #007bff; } #equals:hover, #clear:hover { background-color: #0056b3; } </style> </head> <body> <div class="calculator"> <input type="text" id="display" disabled /> <div class="buttons"> <button onclick="addToDisplay('7')">7</button> <button onclick="addToDisplay('8')">8</button> <button onclick="addToDisplay('9')">9</button> <button onclick="addToDisplay('+')">+</button> <button onclick="addToDisplay('4')">4</button> <button onclick="addToDisplay('5')">5</button> <button onclick="addToDisplay('6')">6</button> <button onclick="addToDisplay('-')">-</button> <button onclick="addToDisplay('1')">1</button> <button onclick="addToDisplay('2')">2</button> <button onclick="addToDisplay('3')">3</button> <button onclick="addToDisplay('*')">×</button> <button onclick="addToDisplay('.')">.</button> <button onclick="addToDisplay('0')">0</button> <button onclick="calculateResult()" id="equals">=</button> <button onclick="addToDisplay('/')">÷</button> <button onclick="clearDisplay()" id="clear">C</button> </div> </div> <script> let displayText = document.getElementById('display'); // Добавляет символ в поле ввода function addToDisplay(symbol) { let currentValue = displayText.value; if (currentValue === '0' || currentValue === 'Ошибка') { displayText.value = symbol; } else { displayText.value += symbol; } } // Выполняет вычисления function calculateResult() { try { let result = eval(displayText.value); displayText.value = result.toString(); } catch (error) { displayText.value = 'Ошибка'; } } // Очищает поле ввода function clearDisplay() { displayText.value = '0'; } // Обрабатываем нажатие клавиш на клавиатуре window.addEventListener('keydown', function(event) { const key = event.key; switch(key) { case '0': case '1': case '2': case '3': case '4': case '5': case '6': case '7': case '8': case '9': addToDisplay(key); break; case '+': case '-': case '*': case '/': addToDisplay(key); break; case '.': addToDisplay('.'); break; case 'Enter': calculateResult(); break; case 'Backspace': clearDisplay(); break; default: return; // Игнорируем остальные клавиши } // Фокусировка на элементе ввода displayText.focus(); }); </script> </body> </html>
Сохраните этот код в файл с расширением .html (например, calculator.html), и вы сможете открыть его в любом современном браузере, чтобы использовать созданный вами калькулятор.
Загрузка...