javascript
JavaScript 计算器
在本教程中，我們將創(chuàng)建一個(gè)簡單的JavaScript 計(jì)算器。該計(jì)算器能夠?qū)?2 個(gè)或 2 個(gè)以上的數(shù)字進(jìn)行加減乘除。
計(jì)算器可以成為日常生活中非常有用的應(yīng)用程序。您可以使用計(jì)算器來計(jì)算您的購物賬單、計(jì)算您的貸款、執(zhí)行簡單的數(shù)學(xué)計(jì)算等。
一般來說，我們有兩種類型的計(jì)算器，一種是科學(xué)計(jì)算器，另一種是簡單計(jì)算器。科學(xué)計(jì)算器用于執(zhí)行復(fù)雜的數(shù)學(xué)計(jì)算，如平方根、平方、立方、對(duì)數(shù)、三角函數(shù)等。而簡單的計(jì)算器用于執(zhí)行簡單的數(shù)學(xué)計(jì)算，如加法、減法、乘法和除法。
我們將在本文中使用 HTML、CSS 和 JavaScript 逐步創(chuàng)建一個(gè)簡單的計(jì)算器。
簡單的 JavaScript 計(jì)算器
讓我們開始創(chuàng)建我們的簡單計(jì)算器。我們將使用：
我們將逐步開始構(gòu)建我們的計(jì)算器。首先，將創(chuàng)建計(jì)算器的結(jié)構(gòu)（使用 HTML），然后我們將對(duì)其進(jìn)行樣式設(shè)置（使用 CSS），最后，我們將創(chuàng)建計(jì)算器的邏輯（使用 JavaScript）。
在繼續(xù)之前，讓我們看看我們將要構(gòu)建什么。
測試應(yīng)用程序
創(chuàng)建計(jì)算器的結(jié)構(gòu) - HTML
當(dāng)您在 HTML 中創(chuàng)建任何東西的結(jié)構(gòu)時(shí)，結(jié)構(gòu)不必是完美的。您首先需要?jiǎng)?chuàng)建一個(gè)基本布局，然后根據(jù)您的需要對(duì)其進(jìn)行修改。
首先創(chuàng)建一個(gè)容器元素（帶有類容器的div 元素），然后在其中創(chuàng)建另一個(gè)帶有類計(jì)算器的 div 元素。這個(gè) div 元素將是我們的計(jì)算器容器。
<div class="container"><div class="calculator"></div> </div> HTML現(xiàn)在，在計(jì)算器容器中，創(chuàng)建 2 個(gè) div 元素，一個(gè)用于顯示結(jié)果，另一個(gè)用于顯示輸入。
<div class="calculator"><div class="output"></div><div class="input"></div> </div> HTML輸出元素將進(jìn)一步包含 2 個(gè)前置元素。第一個(gè)稱為上輸出，顯示表達(dá)式，第二個(gè)稱為下輸出，顯示結(jié)果。
<div class="output"><pre class="upper"></pre><pre class="lower">0</pre> </div> HTML輸入元素將包含我們可以擁有的各種輸入按鈕，例如數(shù)字、運(yùn)算符、清除、括號(hào)等。此外，使用javascript 函數(shù)將 onclick 事件附加到所有這些按鈕。
<div class="input"><button onclick="pressAllClear()">AC</button><button onclick="pressNum(this)">0</button><button onclick="pressClear()"><i class="fas fa-backspace"></i></button><button onclick="pressOperator(this)">+</button><button onclick="pressNum(this)">1</button><button onclick="pressNum(this)">2</button><button onclick="pressNum(this)">3</button><button onclick="pressOperator(this)">-</button><button onclick="pressNum(this)">4</button><button onclick="pressNum(this)">5</button><button onclick="pressNum(this)">6</button><button onclick="pressOperator(this)">×</button><button onclick="pressNum(this)">7</button><button onclick="pressNum(this)">8</button><button onclick="pressNum(this)">9</button><button onclick="pressOperator(this)">÷</button><button onclick="pressDot()">.</button><button onclick="pressBracket(this)">(</button><button onclick="pressBracket(this)">)</button><button onclick="pressEqual()">=</button> </div> HTML在上面的代碼中，您可以看到按鈕按特定順序排列，因?yàn)槲覀兿Ｍ覀兊陌粹o位于特定位置。通過不同的順序，我們可以創(chuàng)建不同的計(jì)算器布局。
最后，將 CSS 和 Javascript 文件連接到 HTML 文件。此外，將字體很棒的圖標(biāo)添加到 HTML 文件中。
這是計(jì)算器的完整 HTML 代碼。將其保存為index.html文件。
完整的 HTML 代碼
<!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"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"><link rel="stylesheet" href="./style.css"><title>Javascript Calculator</title> </head><body><div class="container"><div class="calculator"><div class="output"><pre id="upper"></pre><pre id="lower">0</pre></div><div class="input"><button onclick="pressAllClear()">AC</button><button onclick="pressNum(this)">0</button><button onclick="pressClear()"><i class="fas fa-backspace"></i></button><button onclick="pressOperator(this)">+</button><button onclick="pressNum(this)">1</button><button onclick="pressNum(this)">2</button><button onclick="pressNum(this)">3</button><button onclick="pressOperator(this)">-</button><button onclick="pressNum(this)">4</button><button onclick="pressNum(this)">5</button><button onclick="pressNum(this)">6</button><button onclick="pressOperator(this)">×</button><button onclick="pressNum(this)">7</button><button onclick="pressNum(this)">8</button><button onclick="pressNum(this)">9</button><button onclick="pressOperator(this)">÷</button><button onclick="pressDot()">.</button><button onclick="pressBracket(this)">(</button><button onclick="pressBracket(this)">)</button><button onclick="pressEqual()">=</button></div></div></div><script src="./script.js"></script> </body></html> HTML這是它的外觀：
樣式化計(jì)算器 - CSS
要設(shè)置計(jì)算器的樣式，您需要?jiǎng)?chuàng)建 CSS 文件。在 CSS 文件中，使用CSS 選擇器定位元素并向它們添加樣式：
對(duì)于按鈕方向，您可以使用flexbox。
這是計(jì)算器的完整 CSS 代碼。將其保存為style.css文件。
完整的 CSS 代碼
/* Calculator CSS */ @import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');body {margin: 0;box-sizing: border-box; }.container {display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #4e4e4e; }.calculator {background: #dd6f6f;border-radius: 5px;padding: 5px;width: 300px;min-width: 300px;box-shadow: inset 2px 2px 5px rgba(255, 255, 255, 0.4), 4px 4px 10px rgba(0, 0, 0, 0.7); }.output {display: flex;flex-direction: column;align-items: flex-end;position: relative;background: #ffffff;min-height: 50px;padding: 5px;margin: 0 1px 10px;border-radius: 0.25rem;box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.5); }.output pre {text-align: right;font-size: 25px;margin: 0;font-family: 'Orbitron', sans-serif;width: 288px;overflow-x: auto;-ms-overflow-style: none;scrollbar-width: none; }.output pre::-webkit-scrollbar {display: none; }.output #upper {color: #424242;font-size: 18px; }.input {display: flex;flex-wrap: wrap;justify-content: space-between; }.input button {width: calc(25% - 24px);height: 50px;margin: 8px 12px;border-radius: 50%;background-color: #c05d5d;box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.3),1px 1px 5px rgba(94, 31, 31, 0.7);color: white;font-size: 20px;font-weight: bold;cursor: pointer;outline: none;border: none; }.input button:hover {background-color: #b35555; }.input button:active {box-shadow: inset 1px 1px 5px rgba(94, 31, 31, 0.7),inset -1px -1px 2px rgba(255, 255, 255, 0.3);color: #642929; } CSS我們已經(jīng)完成了計(jì)算器的設(shè)計(jì)。現(xiàn)在，我們需要?jiǎng)?chuàng)建 JavaScript 代碼以使計(jì)算器工作。
Javascript計(jì)算器代碼
現(xiàn)在讓我們?yōu)橛?jì)算器編寫 JavaScript 代碼。
一、選擇要素
在 HTML 部分，您可以看到有 2 個(gè)輸出元素。使用querySelector方法選擇它們。
// Select the output elements // upper output is for showing the expression let outputUpper = document.querySelector('#upper'); // lower output is for showing the result let outputLower = document.querySelector('#lower'); JavaScript'outputLower'是顯示用戶給出的表達(dá)式和結(jié)果輸出的地方。
'outputUpper'是用戶給出的表達(dá)式將在結(jié)果上方以小尺寸顯示的位置，以便用戶可以同時(shí)看到他們的表達(dá)式和結(jié)果。
二、現(xiàn)在創(chuàng)建一個(gè)函數(shù)來輸入數(shù)字。
// function to get number input function pressNum(e) {if (outputLower.innerHTML === '0') {outputLower.innerHTML = e.innerHTML;} else {outputLower.innerHTML += e.innerHTML;} } JavaScript當(dāng)按下任意數(shù)字按鈕時(shí)，將調(diào)用上述函數(shù)。它將檢查 outputLower（表達(dá)式）是否為 0。如果它是 0，那么它將用按下的數(shù)字替換 0。如果不為 0，則將按下的數(shù)字添加到 outputLower。
該函數(shù)使用此關(guān)鍵字獲取按下的數(shù)字。
三、現(xiàn)在創(chuàng)建函數(shù)來輸入運(yùn)算符。
// function to get operator input function pressOperator(e) {// check last operatorlet lastOperator = outputLower.innerHTML.slice(-1);if (lastOperator === '+' || lastOperator === '-' || lastOperator === '×' || lastOperator === '÷') {output.innerHTML = outputLower.innerHTML.slice(0, -1) + e.innerHTML;} else {outputLower.innerHTML += e.innerHTML;} } JavaScript當(dāng)按下任何操作員按鈕時(shí)，將調(diào)用上述函數(shù)。它將檢查表達(dá)式中的最后一個(gè)運(yùn)算符是否為 +、-、× 或 ÷。如果是 +、-、× 或 ÷，那么它將用按下的運(yùn)算符替換最后一個(gè)運(yùn)算符。如果不是 +、-、× 或 ÷，則將按下的運(yùn)算符添加到 outputLower。
我們正在檢查和替換最后一個(gè)運(yùn)算符，因?yàn)槿绻腥硕啻伟?+ 運(yùn)算符，它就會(huì)變成 ++ 或 +++，這不是一個(gè)有效的運(yùn)算符。或者可能有大小寫或 +*、+/+ 等。所以我們用新按下的運(yùn)算符替換最后一個(gè)運(yùn)算符。
四。現(xiàn)在創(chuàng)建函數(shù)來清除計(jì)算器。
我們有 2 個(gè)按鈕來清除計(jì)算器。一個(gè)是清除按鈕，另一個(gè)是清除所有按鈕。
// function to clear the calculator // clear all function pressAllClear() {outputUpper.innerHTML = '';outputLower.innerHTML = '0'; }// clear one function pressClear() {outputLower.innerHTML = outputLower.innerHTML.slice(0, -1); } JavaScript要清除一個(gè)數(shù)字，我們將使用'outputLower.innerHTML.slice(0, -1)'方法。這將從表達(dá)式中刪除最后一個(gè)數(shù)字。要清除所有數(shù)字，我們將使用'outputLower.innerHTML = '0';'?方法。這將用 0 替換表達(dá)式。
五、創(chuàng)建寫點(diǎn)和括號(hào)的函數(shù)。
// function to get dot and bracket input function pressDot() {outputLower.innerHTML += '.'; }function pressBracket(e) {outputLower.innerHTML += e.innerHTML; } JavaScript六、現(xiàn)在創(chuàng)建函數(shù)來計(jì)算結(jié)果。
// function to calculate the result function pressEqual() {let exp = outputLower.innerHTML;outputUpper.innerHTML = exp;exp = exp.replace(/×/g, '*').replace(/÷/g, '/');let result;try {result = eval(exp);// if decimal number more than 4 decimal placesif (result.toString().indexOf('.') !== -1) {result = result.toFixed(4);}} catch (e) {result = 'Error';}outputLower.innerHTML = result; } JavaScript按下等號(hào)按鈕 (=) 時(shí)將調(diào)用上述函數(shù)。它將計(jì)算表達(dá)式的結(jié)果并將其顯示在outputLower中。
我們正在使用eval()方法來計(jì)算結(jié)果。
在這里，我們在 try 和 catch 塊中執(zhí)行表達(dá)式。如果表達(dá)式中有任何錯(cuò)誤，則會(huì)顯示錯(cuò)誤。
我們也在檢查結(jié)果是否為十進(jìn)制數(shù)。如果它是一個(gè)十進(jìn)制數(shù)，那么我們將它顯示為 4 個(gè)小數(shù)位。
最后，結(jié)果顯示在outputLower中，相應(yīng)的表達(dá)式顯示在outputUpper中。
七。現(xiàn)在創(chuàng)建函數(shù)來清除表達(dá)式和所有清除屏幕。
// clear one function pressClear() {outputLower.innerHTML = outputLower.innerHTML.slice(0, -1); }// clear all function pressAllClear() {outputUpper.innerHTML = '';outputLower.innerHTML = '0'; } JavaScript要清除一個(gè)數(shù)字，我們將使用'outputLower.innerHTML.slice(0, -1)'方法。這將從表達(dá)式中刪除最后一個(gè)數(shù)字。要清除所有數(shù)字，我們將使用'outputLower.innerHTML = '0';'?方法。這將用 0 替換表達(dá)式。
八。現(xiàn)在為鍵盤按鈕添加事件監(jiān)聽器。
最后，為鍵盤按鈕添加事件監(jiān)聽器，這樣當(dāng)任何按鈕被按下時(shí)，它都會(huì)調(diào)用相應(yīng)的函數(shù)，用戶將能夠從鍵盤本身運(yùn)行計(jì)算器。
// add event listeners for keyboard buttons document.addEventListener('keydown', function (e) {switch (e.key) {case '0':pressNum(document.querySelector('button:nth-child(2)'));break;case '1':pressNum(document.querySelector('button:nth-child(5)'));break;case '2':pressNum(document.querySelector('button:nth-child(6)'));break;case '3':pressNum(document.querySelector('button:nth-child(7)'));break;case '4':pressNum(document.querySelector('button:nth-child(9)'));break;case '5':pressNum(document.querySelector('button:nth-child(10)'));break;case '6':pressNum(document.querySelector('button:nth-child(11)'));break;case '7':pressNum(document.querySelector('button:nth-child(13)'));break;case '8':pressNum(document.querySelector('button:nth-child(14)'));break;case '9':pressNum(document.querySelector('button:nth-child(15)'));break;case '+':pressOperator(document.querySelector('button:nth-child(4)'));break;case '-':pressOperator(document.querySelector('button:nth-child(8)'));break;case '*':pressOperator(document.querySelector('button:nth-child(12)'));break;case '/':pressOperator(document.querySelector('button:nth-child(16)'));break;case '.':pressDot();break;case '(':pressBracket(document.querySelector('button:nth-child(18)'));break;case ')':pressBracket(document.querySelector('button:nth-child(19)'));break;case 'Enter':// prevent default actione.preventDefault();pressEqual();break;case 'Backspace':pressClear();break;case 'Escape':pressAllClear();break;} }); JavaScript在上面的代碼中，您可以看到我們正在使用按鈕位置來獲取按鈕。我們正在使用'document.querySelector('button:nth-child(2)')'來獲取位置為 2 的按鈕。這將獲取數(shù)字為 0 的按鈕。依此類推。
完整的 JavaScript 計(jì)算器程序
這是一個(gè)簡單計(jì)算器的完整代碼。
例子
<!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"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"><title>Javascript Calculator</title><style>@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');body {margin: 0;box-sizing: border-box;}.container {display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #4e4e4e;}.calculator {background: #dd6f6f;border-radius: 5px;padding: 5px;width: 300px;min-width: 300px;box-shadow: inset 2px 2px 5px rgba(255, 255, 255, 0.4),4px 4px 10px rgba(0, 0, 0, 0.7);}.output {display: flex;flex-direction: column;align-items: flex-end;position: relative;background: #ffffff;min-height: 50px;padding: 5px;margin: 0 1px 10px;border-radius: 0.25rem;box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.5);}.output pre {text-align: right;font-size: 25px;margin: 0;font-family: 'Orbitron', sans-serif;width: 288px;overflow-x: auto;-ms-overflow-style: none;scrollbar-width: none;}.output pre::-webkit-scrollbar {display: none;}.output #upper {color: #424242;font-size: 18px;}.input {display: flex;flex-wrap: wrap;justify-content: space-between;}.input button {width: calc(25% - 24px);height: 50px;margin: 8px 12px;border-radius: 50%;background-color: #c05d5d;box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.3),1px 1px 5px rgba(94, 31, 31, 0.7);color: white;font-size: 20px;font-weight: bold;cursor: pointer;outline: none;border: none;}.input button:hover {background-color: #b35555;}.input button:active {box-shadow: inset 1px 1px 5px rgba(94, 31, 31, 0.7),inset -1px -1px 2px rgba(255, 255, 255, 0.3);color: #642929;}</style> </head><body><div class="container"><div class="calculator"><div class="output"><pre id="upper"></pre><pre id="lower">0</pre></div><div class="input"><button onclick="pressAllClear()">AC</button><button onclick="pressNum(this)">0</button><button onclick="pressClear()"><i class="fas fa-backspace"></i></button><button onclick="pressOperator(this)">+</button><button onclick="pressNum(this)">1</button><button onclick="pressNum(this)">2</button><button onclick="pressNum(this)">3</button><button onclick="pressOperator(this)">-</button><button onclick="pressNum(this)">4</button><button onclick="pressNum(this)">5</button><button onclick="pressNum(this)">6</button><button onclick="pressOperator(this)">×</button><button onclick="pressNum(this)">7</button><button onclick="pressNum(this)">8</button><button onclick="pressNum(this)">9</button><button onclick="pressOperator(this)">÷</button><button onclick="pressDot()">.</button><button onclick="pressBracket(this)">(</button><button onclick="pressBracket(this)">)</button><button onclick="pressEqual()">=</button></div></div></div><script>// javascript calculator// upper output is for showing the expressionlet outputUpper = document.querySelector('#upper');// lower output is for showing the resultlet outputLower = document.querySelector('#lower');// function to get number inputfunction pressNum(e) {if (outputLower.innerHTML === '0') {outputLower.innerHTML = e.innerHTML;} else {outputLower.innerHTML += e.innerHTML;}}// clear allfunction pressAllClear() {outputUpper.innerHTML = '';outputLower.innerHTML = '0';}// clear onefunction pressClear() {outputLower.innerHTML = outputLower.innerHTML.slice(0, -1);}// calculate buttonfunction pressEqual() {let exp = outputLower.innerHTML;outputUpper.innerHTML = exp;exp = exp.replace(/×/g, '*').replace(/÷/g, '/');let result;try {result = eval(exp);// if decimal number more than 4 decimal placesif (result.toString().indexOf('.') !== -1) {result = result.toFixed(4);}} catch (e) {result = 'Error';}outputLower.innerHTML = result;}function pressOperator(e) {// check last operatorlet lastOperator = outputLower.innerHTML.slice(-1);if (lastOperator === '+' || lastOperator === '-' || lastOperator === '×' || lastOperator === '÷') {output.innerHTML = outputLower.innerHTML.slice(0, -1) + e.innerHTML;} else {outputLower.innerHTML += e.innerHTML;}}function pressDot() {outputLower.innerHTML += '.';}function pressBracket(e) {outputLower.innerHTML += e.innerHTML;}// attach keyboard eventdocument.addEventListener('keydown', function (e) {switch (e.key) {case '0':pressNum(document.querySelector('button:nth-child(2)'));break;case '1':pressNum(document.querySelector('button:nth-child(5)'));break;case '2':pressNum(document.querySelector('button:nth-child(6)'));break;case '3':pressNum(document.querySelector('button:nth-child(7)'));break;case '4':pressNum(document.querySelector('button:nth-child(9)'));break;case '5':pressNum(document.querySelector('button:nth-child(10)'));break;case '6':pressNum(document.querySelector('button:nth-child(11)'));break;case '7':pressNum(document.querySelector('button:nth-child(13)'));break;case '8':pressNum(document.querySelector('button:nth-child(14)'));break;case '9':pressNum(document.querySelector('button:nth-child(15)'));break;case '+':pressOperator(document.querySelector('button:nth-child(4)'));break;case '-':pressOperator(document.querySelector('button:nth-child(8)'));break;case '*':pressOperator(document.querySelector('button:nth-child(12)'));break;case '/':pressOperator(document.querySelector('button:nth-child(16)'));break;case '.':pressDot();break;case '(':pressBracket(document.querySelector('button:nth-child(18)'));break;case ')':pressBracket(document.querySelector('button:nth-child(19)'));break;case 'Enter':// prevent default actione.preventDefault();pressEqual();break;case 'Backspace':pressClear();break;case 'Escape':pressAllClear();break;}});</script> </body></html> HTML ? 試試看結(jié)論
在這份完整的 JavaScript 計(jì)算器指南中，您已經(jīng)學(xué)會(huì)了如何創(chuàng)建一個(gè)很棒的簡單計(jì)算器。您可以使用它來計(jì)算任何數(shù)學(xué)表達(dá)式。鍵盤事件也附在計(jì)算器上。您也可以在您的網(wǎng)站或移動(dòng)應(yīng)用程序上使用計(jì)算器。
總結(jié)
以上是生活随笔為你收集整理的JavaScript 计算器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JavaScript计算器（加减乘除完善
- 下一篇： 使用JS完成一个简单的计算器功能