Javascript는 계산기를 포함한 많은 실용적인 응용 프로그램을 포함하여 프런트 엔드 개발에 널리 사용되는 프로그래밍 언어입니다. PC에서든 모바일에서든 JS에서 개발한 계산기들이 많이 사용되고 있습니다. 다음은 계산기 코드를 구현하는 몇 가지 방법을 소개합니다.
1. 기본 구조
계산기 코드 작성을 시작하기 전에 먼저 기본 구조를 이해해야 합니다. 일반적으로 계산기는 숫자, 연산자, 등호 및 지우기 키를 포함한 4개의 기본 버튼으로 구성됩니다. 이를 바탕으로 기본 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>
이 기본 구조에서는 계산기
클래스를 컨테이너로 정의합니다. screen
클래스의 input
태그는 계산 결과를 표시하는 데 사용됩니다. buttons
클래스의 버튼은 숫자, 연산자, 등호 및 키를 각각 지웁니다. 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
계산기
클래스를 정의하고 클래스에 다양한 처리 기능을 정의합니다. 🎜rrreee🎜이 코드에서는 계산기
를 정의합니다. 클래스는 생성자를 사용하여 계산기의 상태를 초기화하고 다양한 처리 기능을 정의합니다. 이벤트를 처리하는 과정에서 각 버튼이 해당 클릭 이벤트에 응답할 수 있도록 querySelectorAll
및 addEventListener
를 사용합니다. 🎜🎜3. 결론🎜🎜위는 Javascript에서 계산기 코드를 구현하는 기본 방법입니다. 이 프로세스에서는 먼저 기본 HTML 구조를 디자인한 다음 해당 클릭 이벤트 처리 함수를 작성하고 마지막으로 계산기
클래스를 초기화해야 합니다. 실제 개발에서는 보다 복잡한 계산기 기능을 달성하기 위해 실제 필요에 따라 해당 코드를 수정할 수 있습니다. 🎜위 내용은 자바스크립트로 계산기 코드를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!