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中文網其他相關文章!