Javascript是一門廣泛應用於前端開發的程式語言，其中包含了許多實用的應用，其中就包含了計算器。無論是在PC端還是在行動端，都有許多JS開發的計算器在使用。以下就是介紹一些實作計算器程式碼的方法。
一、基本結構
在開始寫計算器程式碼之前，我們首先應該先了解它的基本結構。通常，一個計算器會由四個基本按鈕組成，包括數字、運算元、等號和清除鍵。基於此，我們可以設計一個基本的HTML結構：
<div class="calculator">
<input class="screen" readonly>
<div class="buttons">
<button class="number">0</button>
<button class="number">1</button>
<button class="number">2</button>
<button class="op">+</button>
<button class="number">3</button>
<button class="number">4</button>
<button class="number">5</button>
<button class="op">-</button>
<button class="number">6</button>
<button class="number">7</button>
<button class="number">8</button>
<button class="op">*</button>
<button class="number">9</button>
<button class="op">.</button>
<button class="op">/</button>
<button class="clear">C</button>
<button class="equal">=</button>
</div>
</div>在這個基本結構中，我們定義了一個calculator類別作為容器。 screen類別的input標籤用來顯示計算結果，buttons類別的按鈕分別對應數字、運算子、等號、清除鍵。
二、處理點擊事件
在上述HTML結構中，我們已經定義了各類別按鈕的類別名，接下來我們需要寫出對應的點擊事件處理函數。如果一個按鈕被點擊，我們需要處理以下事情：
接著，我們定義一個Calculator類，將各種處理函數定義在類別中：
class Calculator {
constructor() {
this.result = 0;
this.operator = null;
this.input = '';
this.screen = document.querySelector('.screen');
}
addNumber(number) {
this.input += number;
this.updateScreen();
}
updateScreen() {
this.screen.value = this.input;
}
addOperator(operator) {
if (this.input !== '') {
this.operator = operator;
this.result = parseFloat(this.input);
this.input = '';
this.updateScreen();
}
}
calculate() {
if (this.operator !== null && this.input !== '') {
switch (this.operator) {
case '+':
this.result += parseFloat(this.input);
break;
case '-':
this.result -= parseFloat(this.input);
break;
case '*':
this.result *= parseFloat(this.input);
break;
case '/':
this.result /= parseFloat(this.input);
break;
}
this.operator = null;
this.input = this.result.toString();
this.updateScreen();
}
}
clear() {
this.result = 0;
this.operator = null;
this.input = '';
this.updateScreen();
}
}
const calculator = new Calculator();
document.querySelectorAll('.number').forEach(button => {
button.addEventListener('click', () => {
calculator.addNumber(button.innerText);
});
});
document.querySelectorAll('.op').forEach(button => {
button.addEventListener('click', () => {
calculator.addOperator(button.innerText);
});
});
document.querySelector('.equal').addEventListener('click', () => {
calculator.calculate();
});
document.querySelector('.clear').addEventListener('click', () => {
calculator.clear();
});在這個程式碼中，我們定義了一個Calculator類，使用建構函數初始化了計算器的狀態，並定義了各種處理函數。在處理事件的過程中，我們使用了querySelectorAll和addEventListener#，讓每個按鈕都能回應對應的點擊事件。
三、結論
以上就是Javascript實作計算器程式碼的基本方法。在這個過程中，我們首先需要設計基本的HTML結構，然後寫出對應的點擊事件處理函數，最後初始化一個Calculator類別。在實際開發中，我們可以根據實際需求修改對應的程式碼，實現更複雜的計算器功能。
以上是javascript怎麼實作計算器程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
