Автоматический расчет всех простых алгоритмических вычислений с помощью только одной функции в JavaScript
Привет! Прошло много времени. Давайте теперь создадим простой калькулятор в нашем веб-браузере, используя JavaScript. Результат будет выглядеть так:
Здесь мы применим некоторые манипуляции с DOM и позволим JavaScript сделать вычисления за вас. Ключом к автоматическому расчету в этом приложении является использование eval().
Время кодировать!
- Настройте документ по своему усмотрению, я начну с создания 3 файлов,
index.html,style.cssиscript.js. - Вот коды HTML и CSS, но я не собираюсь разбирать объяснение HTML и CSS, на самом деле это довольно просто.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Simple Calculator</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="calculator">
<div class="screen">
<div id="result">0</div>
</div>
<button class="btn" onclick="clearResult()">C</button>
<button class="btn" onclick="deleteDigit()">DEL</button>
<button class="btn" onclick="insertOperator('/')">÷</button>
<button class="btn" onclick="insertOperator('*')">x</button>
<button class="btn" onclick="insertOperator('+')">+</button>
<button class="btn" onclick="insertOperator('-')">-</button>
<button class="btn" onclick="insertDigit('.')">.</button>
<button class="btn" onclick="calculateResult()">=</button>
<button class="btn" onclick="insertDigit('1')">1</button>
<button class="btn" onclick="insertDigit('2')">2</button>
<button class="btn" onclick="insertDigit('3')">3</button>
<button class="btn" onclick="insertDigit('4')">4</button>
<button class="btn" onclick="insertDigit('5')">5</button>
<button class="btn" onclick="insertDigit('6')">6</button>
<button class="btn" onclick="insertDigit('7')">7</button>
<button class="btn" onclick="insertDigit('8')">8</button>
<button class="btn" onclick="insertDigit('9')">9</button>
<button class="btn" onclick="insertDigit('0')">0</button>
</div>
<script src="script.js"></script>
</body>
</html>
.calculator {
margin: 50px auto;
width: 300px;
background-color: #eee;
border-radius: 10px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
padding: 10px;
}
.screen {
background-color: #fff;
border-radius: 5px;
padding: 10px;
grid-column: 1 / span 4;
text-align: right;
}
.btn {
font-size: 24px;
background-color: #ddd;
border: none;
border-radius: 5px;
padding: 10px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.btn:hover {
background-color: #ccc;
}
.btn:active {
transform: translateY(1px);
}
- Теперь это JavaScript, я разберу код, чтобы вы объяснили, как он работает.
let result = document.getElementById("result");
function insertDigit(digit) {
if (result.textContent === "0") {
result.textContent = digit;
} else {
result.textContent += digit;
}
}
function insertOperator(operator) {
result.textContent += operator;
}
function clearResult() {
result.textContent = "0";
}
function deleteDigit() {
result.textContent = result.textContent.slice(0, -1);
if (result.textContent === "") {
result.textContent = "0";
}
}
function calculateResult() {
try {
result.textContent = eval(result.textContent);
} catch (e) {
result.textContent = "Error";
}
}
Разберем построчно:
let result = document.getElementById('result');
мы начинаем с захвата элемента #result в переменную с именем result, так как это сердце функциональности калькулятора. Мы будем делать много манипуляций с DOM только для этого элемента.
function insertDigit(digit) {
if (result.textContent === "0") {
result.textContent = digit;
} else {
result.textContent += digit;
}
}
Вы можете видеть в html, что все цифры в калькуляторе под названием insertDigit() функционируют как эта <button class="btn" onclick="insertDigit('1')">1</button>. Как вы можете догадаться, эта функция изменяет текст #result на то, что мы щелкнули, и изменяет его на параметр, который она предоставляет, если начальный текст элемента #result равен 0. Если нет, он добавит больше числа после него.
Например, <button class="btn" onclick="insertDigit('1')">1</button> он вызывает insertDigit('1'), если мы нажмем на него, текстовый элемент #result изменится на 1, такой же, как параметр функции, который он вызвал, то есть 1.
function insertOperator(operator) {
result.textContent += operator;
}
Эта функция добавит текст оператора после цифры, которую мы предоставили ранее.
function clearResult() {
result.textContent = "0";
}
Эта функция изменит текст #result на 0.
function deleteDigit() {
result.textContent = result.textContent.slice(0, -1);
if (result.textContent === "") {
result.textContent = "0";
}
}
Эта функция будет удалять один символ из последнего в тексте #result, пока он не станет пустым, и если текст #result пуст, он немедленно изменится на 0 вместо пустого.
function calculateResult() {
try {
result.textContent = eval(result.textContent);
} catch (e) {
result.textContent = "Error";
}
}
Теперь здесь будет происходить расчет, вместо того, чтобы мы сами ставили простой алгоритм, пусть это делает JavaScript, используя eval().
eval() принимает только параметр типа string, и, к счастью, мы предоставляем только string с самого начала вместо number или integer. Метод eval() оценивает или выполняет аргумент.
Если аргумент является выражением, eval() оценивает выражение, а если аргумент является одним или несколькими операторами JavaScript, eval() выполняет операторы.
мы используем try catch для оценки результата, если есть какая-либо ошибка, мы также помещаем ошибку в текст #result. Попробуйте ввести 0 / 0 в приложение-калькулятор, и оно покажет результат ошибки следующим образом:
Полный код можно скачать здесь: SayudhaCode/simple-calculator (github.com)
Если вы нашли этот пост полезным, пожалуйста, дайте мне несколько советов по кнопке ниже. Это очень много значит для меня, и я опубликую больше подобных руководств. Спасибо и всем удачного кодирования!
