学习 Javascript 的基本和最好的方法之一是构建一个简单的计算器。在本教程中，我将逐步引导您了解如何构建和部署这个令人惊叹的项目。
前提
超文本标记语言
CSS
使用 JavaScript 进行基本 DOM 操作。
你的项目应该具备的能力：
尝试自己实现这些条件，然后回来跟进
1. 您的计算器将有 html 文件。这是该项目的骨架。
设置数字（0-9）、运算符（x、/、-、+）、等于（=）、清除和删除按钮。
设置两个显示输入。对于先前值和当前值。
2. 它必须有一个 CSS 文件来设置按钮和整个项目的样式，以便看起来不错。
3.它必须有一个JAVASCRIPT文件来为计算器添加交互性。
4. 在 Javascript 上，您的文件中应包含以下条件和函数：
您的文件将具有基本数学运算的函数，即加、减、除和乘
一个运算将由第一个数字、运算符和第二个数字组成，即 6（第一个数字）x（运算符）7（第二个数字）；
为上述每个部分创建三个变量
创建一个函数，该函数接受第一个数字、运算符和第二个数字，然后调用每个基本数学运算。您可以将其称为operatorFunc
创建一个函数，将单击的按钮的值和计算后的结果添加到 HTML 中的显示中。
您应该找到一种方法将从 html 输入的数字存储到第一个和第二个数字变量中，然后利用用户选择的运算符调用 operaFunc() 。
确保在用户单击等于后显示计算结果。
5. 这是项目中最难的部分，您需要找到一种方法来存储 DOM 中的值，然后用它们 调用operatorFunc 。
这些是您的项目应该满足的最基本的条件。尝试自己实施它们，如果您感到迷茫，请回来我们一起解决。
超文本标记语言
现在是时候投入其中了！
让我们从设置 html 文件开始。将其命名为index.html
将其链接到CSS（在页眉中）和JavaScript 文件（在页脚下方的正文中）。
这是代码：
<!doctype html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Javascript calculator Project</title> <link rel="stylesheet" href="index.css" /> </head> <body> <script src="index.js"></script> </body> </html>
设置Body
A。添加按钮：数字（0-9）、运算符（X、/、-、+）、等于（=）、清除（AC）和删除按钮（Delete）。
b. 确保适当添加 id 和类，因为它们将在 css 中用于样式设置。
C。添加两个显示输入。
不适用。您可以自由使用按钮，在下面的代码中，我使用了按钮类型的输入元素
<body> <h1>Javascript Calculator</h1> <div class="calc-container"> <div class="display_container"> <div id="displayPrev" class="display"></div> <div id="displayCurr" class="display">0</div> </div> <div class="clear-and-delete-container"> <input type="button" value="Delete" id="delete" class="remove-btn" /> <input type="button" value="AC" id="AC" class="remove-btn" /> </div> <div class="btn-container"> <input type="button" value="7" class="btn" id="7" /> <input type="button" value="8" class="btn" id="8" /> <input type="button" value="9" class="btn" id="9" /> <input type="button" value="÷" class="operant divide" id="/" /> <input type="button" value="4" class="btn" id="4" /> <input type="button" value="5" class="btn" id="5" /> <input type="button" value="6" class="btn" id="6" /> <input type="button" value="x" class="operant multiply" id="x" /> <input type="button" value="1" class="btn" id="1" /> <input type="button" value="2" class="btn" id="2" /> <input type="button" value="3" class="btn" id="3" /> <input type="button" value="-" class="operant subtraction" id="-" /> <input type="button" value="." class="btn period" id="period" /> <input type="button" value="0" class="btn" id="1" /> <input type="button" value="=" class="equals" id="equals" /> <!-- operants --> <input type="button" value="+" class="operant add" id="+" /> </div> <div class="operants"></div> </div> <script src="index.js"></script> </body>
CSS
是时候设置 HTML 样式了。您可能需要确保操作按钮具有不同的颜色。另外，请确保使用布局样式，即实现网格或 Flexbox 布局。这将确保按钮排列良好并且全部适合可用空间。在下面的代码中，我使用了两者。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
overflow-x: hidden;
}
body {
background: #f0ffff;
display: grid;
justify-content: center;
align-content: center;
margin: 0 auto;
overflow-x: hidden;
}
.calc-container {
width: 350px;
height: 485px;
margin: 2rem auto;
background: #aaaaaa;
padding: 0.5rem;
border: transparent;
border-radius: 15px;
}
.display_container {
display: grid;
background-color: #f0ffff;
border: transparent;
border-radius: 15px;
margin: 0.2rem 0;
}
.display {
text-align: right;
padding: 0.5rem;
border: 0;
color: black;
outline: none;
width: 100%;
height: 40px;
border-style: none;
font-size: 30px;
}
.clear-and-delete-container {
display: flex;
}
.clear-and-delete-container input {
width: 100%;
border: 1px solid black;
border-radius: 10px;
}
.btn-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
padding: 0.2rem;
}
.btn,
.operant {
width: 80px;
margin: 0.1rem;
height: 80px;
border: 1px solid black;
border-radius: 10px;
background: #ffff;
z-index: 0;
transition: background-color 0.25s ease-in 0.09s;
}
.remove-btn:nth-child(2) {
height: 45px;
background: #9999ee;
}
.remove-btn:nth-child(1) {
background: red;
}
.btn:hover {
background-color: transparent;
box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.5);
}
.remove-btn:hover {
background: rgba(255, 255, 255, 0.2);
color: black;
}
.equals {
width: 80px;
margin: 0.1rem;
height: 80px;
border: 1px solid black;
border-radius: 10px;
background: #49ca3e;
}
.equals:hover {
background: #ffff;
}
.period {
font-size: larger;
}
.divide {
background: #b2b2d1;
}
.multiply {
background: #00b1c5;
}
.subtraction {
background: orange;
}
.add {
background: #e15a46;
}
.operant:hover {
background: #ffff;
}上面的代码可能看起来很多，但实际上并非如此。花点时间浏览并理解它的样式。
脚本语言
现在我们来到了最重要的部分。项目的逻辑部分。
首先，我们将回顾我之前提供的步骤。
将所有已初始化的变量放在 javascript 文件的开头是一个很好的做法。
下面的代码说明了我们需要的大部分变量。
A。首先，我们将第一个数字和第二个数字初始化为0；
然后我们将运算符初始化为空，以便当用户单击任何运算符按钮时，值都会更新并存储在该变量中。
这与result和previousComput变量相同，即如果用户单击 equals，我们运行计算，然后结果将存储在result变量中，如果他们选择继续操作，结果也会存储在previousComput变量中。
let firstNumber = 0; let secondNumber = 0; let operator = ""; let previousComput = ""; let result = 0;
b. 从 DOM 中获取数据并将其存储在变量中。
这里我们使用querySelector和querySelectorAll来选择元素。以下是我们可能需要的所有变量。
const calcValues = document.querySelectorAll(".btn");
let displayPrev = document.querySelector("#displayPrev");
let displayCurr = document.querySelector("#displayCurr");
const equals = document.querySelector(".equals");
const operants = document.querySelectorAll(".operant");
const clear = document.querySelector("#AC");
const deleteEl = document.querySelector("#delete");C。设置函数来监听 DOM 事件。
下面的代码侦听操作符（X、/、-、+）按钮上的单击事件并做出相应响应，即更新显示值、存储要在计算中使用的单击操作符的值等等！请注意 if...else 语句。
operants.forEach((operant) => {
operant.addEventListener("click", () => {
if (displayPrev.innerHTML == "") {
firstNumber = displayCurr.innerHTML;
displayPrev.innerHTML = `${displayCurr.innerHTML} ${operant.value} `;
displayCurr.innerHTML = "";
operator = operant.value;
} else {
previousComput = concatFunc();
displayPrev.innerHTML = previousComput + " " + operant.value + " ";
operator = operant.value;
firstNumber = previousComput;
displayCurr.innerHTML = "";
}
});
});d. 接下来，设置一个函数来监听数字按钮（0-9）的点击事件。
下面就是这样一个函数。它获取单击的值并将它们存储为firstNumber 或secondNumber。请注意，第二个数字仅在第一个数字更新并且用户单击操作后才会更新。
它还会显示 displayCurr 元素中的值，因为这是当前正在发生的操作。记下handleClick 函数。它是一个回调函数（...它已作为另一个函数中的参数传递）
const handleClick = (e) => {
displayCurr.innerHTML === "0"
? (displayCurr.innerHTML = e.target.value)
: (displayCurr.innerHTML += e.target.value);
};
calcValues.forEach((button) => {
button.addEventListener("click", handleClick);
});现在是我们设置基本数学运算函数的时候了。加法、减法等。
稍后我们将在 operaFunc 中调用这些函数。这些函数仅采用两个参数，第一个数字和第二个数字，然后将根据所选的运算符执行操作。操作符将由 operaFunc() 提供；
请注意：
变量前的加号将其从字符串转换为数字
此外，我们希望防止返回小数点太长的答案。为此，我们使用 toFixed();
//let result = 0;
const multiply = (firstNumber, secondNumber) => {
//The plus before a number converts it to a number from being a string
//Also We want to prevent returning answers that have too long decimals so to
//Do that we use toFixed();
result = +firstNumber * +secondNumber;
if (!Number.isInteger(result)) {
return result.toFixed(2);
}
return result;
};
const divide = (firstNumber, secondNumber) => {
if (+secondNumber === 0) {
alert("You can't divide a number by zero!");
location.reload();
} else {
result = +firstNumber / +secondNumber;
if (!Number.isInteger(result)) {
return result.toFixed(2);
}
return result;
}
};
const add = (firstNumber, secondNumber) => {
result = +firstNumber + +secondNumber;
if (!Number.isInteger(result)) {
return result.toFixed(2);
}
return result;
};
const subtract = (firstNumber, secondNumber) => {
result = +firstNumber - +secondNumber;
if (!Number.isInteger(result)) {
return result.toFixed(2);
}
return result;
};我们希望确保用户能够删除号码或清除屏幕。下面的代码解决了这个问题。
请参考数组方法来理解为什么我们使用.slice();
clear.addEventListener("click", () => {
displayPrev.innerHTML = "";
displayCurr.innerHTML = "";
});
deleteEl.addEventListener("click", () => {
if (displayCurr.innerHTML !== "") {
displayCurr.innerHTML = displayCurr.innerHTML.slice(0, -1);
} else {
displayPrev.innerHTML = displayPrev.innerHTML.slice(0, -1);
displayCurr.innerHTML += displayCurr.innerHTML;
}
});e. 是时候显示结果并使计算器工作了！
编写一个函数来侦听等于按钮上的单击事件并对其进行处理。
下面的代码做了以下事情：
监听点击事件并触发 concatFunc()
concatFunc 是该项目的核心。它触发 operaFunc，进而调用基本数学运算符函数并显示结果。
我们使用 if...else 语句来添加有关何时调用某个函数的条件，并对意外行为发出警告。
equals.addEventListener("click", concatFunc);
function concatFunc() {
if (previousComput == "") {
secondNumber = displayCurr.innerHTML;
} else {
secondNumber = displayCurr.innerHTML;
}
displayPrev.innerHTML += `${displayCurr.innerHTML} ${equals.value}`;
const operatorFunc = (firstNumber, operator, secondNumber) => {
if (operator == "x") {
return multiply(firstNumber, secondNumber);
} else if (operator == "+") {
return add(firstNumber, secondNumber);
} else if (operator == "-") {
return subtract(firstNumber, secondNumber);
} else if (operator == "÷") {
return divide(firstNumber, secondNumber);
}
};
displayCurr.innerHTML = operatorFunc(firstNumber, operator, secondNumber);
return operatorFunc(firstNumber, operator, secondNumber);
}OK
您已经创建了一个 JavaScript 计算器。如果您没有完成，请不要感到难过。大多数概念可能需要一段时间才能理解。
结论
通过完成这个项目，您学到了很多东西，包括：
如何使用 CSS 网格和 Flexbox
如何进行变量声明
如何从 DOM 获取元素以及一般 DOM 操作。您已经了解了 querySelector、querySelectorAll 和 getElementById 等方法在 DOM 操作中的用途。
如何使用事件侦听器，尤其是“单击”以及后续的回调函数链接
如何正确调用函数
最后，您学会了如何在建立项目时有效地进行逻辑思考。文章来源：https://www.toymoban.com/article/506.html
文章来源地址https://www.toymoban.com/article/506.html
到此这篇关于使用JavaScript写一个完整的计算器效果的文章就介绍到这了,更多相关内容可以在右上角搜索或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
