Home > Article > Web Front-end > How to implement calculator code in javascript
Javascript is a programming language widely used in front-end development, including many practical applications, including calculators. Whether on PC or mobile, there are many calculators developed by JS in use. The following is an introduction to some methods of implementing calculator code.
1. Basic structure
Before starting to write the calculator code, we should first understand its basic structure. Typically, a calculator will consist of four basic buttons, including numbers, operators, the equal sign, and the clear key. Based on this, we can design a basic HTML structure:
<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>
In this basic structure, we define a calculator
class as a container. The input
tag of the screen
class is used to display calculation results, and the buttons
class buttons correspond to numbers, operators, equal signs and clear keys respectively.
2. Processing click events
In the above HTML structure, we have defined the class names of various buttons. Next, we need to write the corresponding click event processing function. If a button is clicked, we need to handle the following things:
Next, we define a Calculator
class and define various processing functions in the class:
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(); });
In this code, we define a # The ##Calculator class uses the constructor to initialize the state of the calculator and defines various processing functions. In the process of handling events, we use
querySelectorAll and
addEventListener so that each button can respond to the corresponding click event.
Calculator class. In actual development, we can modify the corresponding code according to actual needs to achieve more complex calculator functions.
The above is the detailed content of How to implement calculator code in javascript. For more information, please follow other related articles on the PHP Chinese website!