Напиши код питон и сделай калькулятор в браузере
Ответ нейросети
03 марта 2025 09:10
Чтобы создать простейший калькулятор, который будет работать в браузере, мы можем использовать HTML, CSS и JavaScript. Приведу подробное пошаговое руководство по созданию такого калькулятора.
Шаг 1: Создайте HTML файл
Первым делом, создайте файл с расширением .html, например calculator.html, и добавьте следующий код:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Калькулятор</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Простой Калькулятор</h1>
<div id="calculator">
<input type="text" id="display" disabled>
<div id="buttons">
<button onclick="clearDisplay()">C</button>
<button onclick="appendToDisplay('7')">7</button>
<button onclick="appendToDisplay('8')">8</button>
<button onclick="appendToDisplay('9')">9</button>
<button onclick="appendToDisplay('/')">/</button>
<button onclick="appendToDisplay('4')">4</button>
<button onclick="appendToDisplay('5')">5</button>
<button onclick="appendToDisplay('6')">6</button>
<button onclick="appendToDisplay('*')">*</button>
<button onclick="appendToDisplay('1')">1</button>
<button onclick="appendToDisplay('2')">2</button>
<button onclick="appendToDisplay('3')">3</button>
<button onclick="appendToDisplay('-')">-</button>
<button onclick="appendToDisplay('0')">0</button>
<button onclick="calculate()">=</button>
<button onclick="appendToDisplay('+')">+</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Шаг 2: Создайте CSS файл
Создайте файл с расширением .css, например styles.css, и добавьте в него следующий код, чтобы оформить калькулятор:
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
}
#calculator {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
#display {
width: 100%;
height: 40px;
margin-bottom: 10px;
text-align: right;
font-size: 20px;
}
#buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
button {
width: 100%;
padding: 20px;
font-size: 20px;
cursor: pointer;
border: none;
background-color: #007BFF;
color: white;
border-radius: 5px;
margin: 5px;
}
button:hover {
background-color: #0056b3;
}
Шаг 3: Создайте JavaScript файл
Создайте файл с расширением .js, например script.js, и добавьте следующий код:
function appendToDisplay(value) {
document.getElementById("display").value += value;
}
function clearDisplay() {
document.getElementById("display").value = "";
}
function calculate() {
let display = document.getElementById("display").value;
try {
document.getElementById("display").value = eval(display);
} catch (e) {
document.getElementById("display").value = "Ошибка";
}
}
Шаг 4: Открытие калькулятора в браузере
Теперь у вас есть три файла: calculator.html, styles.css и script.js. Откройте файл calculator.html в браузере (двойной клик по файлу или перетащите его в окно браузера) — ваш калькулятор будет готов к использованию!
Пояснения:
- HTML создает структуру калькулятора, включая кнопки и отображение.
- CSS добавляет стили, чтобы интерфейс выглядел приятно и современно.
- JavaScript обеспечивает функциональность: обработки нажатий на кнопки, очистку экрана и вычисление результата с помощью функции
eval(). Будьте осторожны с использованиемeval, так как он выполняет код, передаваемый в виде строки, что может быть небезопасно.
Если у вас есть вопросы или требуется помощь с другими аспектами программирования, дайте знать!
Понравился ответ?
Задай свой вопрос
Напиши любую задачу или вопрос, а нейросеть её решит
