简易的JS计算器实现代码

下面是关于“简易的JS计算器实现代码”的完整攻略:

一、准备工作

要实现一个简易的JS计算器,首先需要在HTML文件中创建计算器的界面,其中需要包括如下组件:

  1. 计算器界面:使用HTML的div元素模拟。
  2. 显示框:显示计算结果。
  3. 操作按钮:包括加、减、乘、除等常见计算操作,使用HTML的button元素模拟。

在创建好计算器的界面后,需要在JS文件中获取各个操作按钮的ID,以方便后续操作,并使用addEventListener()方法为按钮添加点击事件监听器。

二、实现计算器的核心逻辑

  1. 数字按键事件

在计算器界面中,每个数字按钮被点击后,需要将其数字值显示在显示框中,即实现姆供了数字输入功能。为此,在JS文件中需要添加数字按键事件监听器,并在事件处理函数中使用JavaScript的DOM操作将按键事件中携带的数字值添加进显示框中。

示例代码如下:

const numButtons = document.querySelectorAll('.calc-button__num');
const output = document.querySelector('.calc-output');
numButtons.forEach(function(button) {
    button.addEventListener('click', function(event) {
        output.value += event.target.textContent;
    });
});
  1. 操作符按键事件

在计算器界面中,操作符按键被点击后,需要根据显示框中的数字值进行计算,并将计算结果显示在显示框中。为此,在JS文件中需要添加操作符按键事件监听器,并在事件处理函数中使用JavaScript实现计算器核心逻辑,包括数字的加减乘除等计算运算。

示例代码如下:

const operatorButtons = document.querySelectorAll('.calc-button__operator');
const calculate = function(a, b, operator) {
    switch (operator) {
        case '+':
            return a + b;
        case '-':
            return a - b;
        case '*':
            return a * b;
        case '/':
            return a / b;
        default:
            throw new Error(`Unknown operator ${operator}.`);
    }
};
let operand1 = null;
let operator = null;
operatorButtons.forEach(function(button) {
    button.addEventListener('click', function(event) {
        if (operand1 === null) {
            operand1 = Number(output.value);
            operator = event.target.textContent;
            output.value = '';
        } else {
            const operand2 = Number(output.value);
            const result = calculate(operand1, operand2, operator);
            operand1 = result;
            operator = event.target.textContent;
            output.value = '';
            output.value = result;
        }
    });
});

三、完整代码示例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>JS Calculator</title>
    <style>
      .calc {
        display: flex;
        flex-wrap: wrap;
        width: 240px;
        margin: auto;
      }
      .calc__output {
        width: 100%;
        margin-bottom: 10px;
        font-size: 18px;
      }
      .calc-button {
        width: 50%;
        box-sizing: border-box;
        padding: 10px;
        font-size: 16px;
        text-align: center;
        background-color: #fff;
        border: 1px solid transparent;
      }
      .calc-button:hover {
        background-color: #eee;
      }
      .calc-button.--operator {
        background-color: #f5f5f5;
      }
    </style>
  </head>
  <body>
    <div class="calc">
      <input type="text" class="calc__output" />
      <button class="calc-button calc-button__num">7</button>
      <button class="calc-button calc-button__num">8</button>
      <button class="calc-button calc-button__num">9</button>
      <button class="calc-button calc-button__operator">+</button>
      <button class="calc-button calc-button__num">4</button>
      <button class="calc-button calc-button__num">5</button>
      <button class="calc-button calc-button__num">6</button>
      <button class="calc-button calc-button__operator">-</button>
      <button class="calc-button calc-button__num">1</button>
      <button class="calc-button calc-button__num">2</button>
      <button class="calc-button calc-button__num">3</button>
      <button class="calc-button calc-button__operator">*</button>
      <button class="calc-button calc-button__num">0</button>
      <button class="calc-button calc-button__operator">/</button>
      <button class="calc-button calc-button__operator">=</button>
      <button class="calc-button calc-button__operator">C</button>
    </div>
    <script>
      const numButtons = document.querySelectorAll('.calc-button__num');
      const operatorButtons = document.querySelectorAll('.calc-button__operator');
      const output = document.querySelector('.calc__output');
      const calculate = function(a, b, operator) {
        switch (operator) {
          case '+':
            return a + b;
          case '-':
            return a - b;
          case '*':
            return a * b;
          case '/':
            return a / b;
          default:
            throw new Error(`Unknown operator ${operator}.`);
        }
      };
      let operand1 = null;
      let operator = null;
      numButtons.forEach(function(button) {
        button.addEventListener('click', function(event) {
          output.value += event.target.textContent;
        });
      });
      operatorButtons.forEach(function(button) {
        button.addEventListener('click', function(event) {
          switch (event.target.textContent) {
            case '+':
            case '-':
            case '*':
            case '/':
              if (operand1 === null) {
                operand1 = Number(output.value);
              } else {
                const operand2 = Number(output.value);
                const result = calculate(operand1, operand2, operator);
                operand1 = result;
                output.value = result;
              }
              operator = event.target.textContent;
              output.value = '';
              break;
            case '=':
              if (operand1 !== null && operator !== null) {
                const operand2 = Number(output.value);
                const result = calculate(operand1, operand2, operator);
                operand1 = null;
                operator = null;
                output.value = result;
              }
              break;
            case 'C':
              operand1 = null;
              operator = null;
              output.value = '';
              break;
            default:
              throw new Error(`Unknown operator ${event.target.textContent}.`);
          }
        });
      });
    </script>
  </body>
</html>

以上是“简易的JS计算器实现代码”的完整攻略,希望能对你有所帮助。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:简易的JS计算器实现代码 - Python技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • JS生成一维码(条形码)功能示例

    下面是关于“JS生成一维码(条形码)功能示例”的完整攻略: 步骤一:导包 在JS中,我们可以使用第三方库JSBarcode来生成一维码(条形码)。因此,在使用该功能之前,首先要导入JSBarcode库。 <script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.0/dist/JsBarc…

    JavaScript 2023年5月19日
    00
  • js检测iframe是否加载完成的方法

    当一个页面中嵌入了一个iframe时,有时我们需要在iframe加载完成后执行一些特定的操作。这时候,我们就需要检测iframe是否已经加载完成。下面是几种js检测iframe是否加载完成的方法。 方法一:使用iframe的load事件 可以通过给iframe绑定load事件来检测iframe是否加载完成。示例代码如下: var iframe = docum…

    JavaScript 2023年5月27日
    00
  • Babylon使用麦克风并处理常见问题解决

    Babylon使用麦克风并处理常见问题解决 使用麦克风是开发语音交互应用程序的基础。Babylon.js提供了一个简单的方法来捕获麦克风的输入,并将其发回服务器处理。本攻略将详细介绍如何在Babylon.js中使用麦克风,并处理常见问题。 检查浏览器支持 在使用麦克风之前,需要先检查浏览器是否支持WebRTC技术。WebRTC简单来说就是一个专为Web浏览器…

    JavaScript 2023年6月11日
    00
  • 深入理解javascript中concat方法

    下面是详细讲解“深入理解JavaScript中concat方法”攻略: concat()方法简介 concat()方法是JavaScript中的一个数组方法,用于将两个或多个数组连接在一起,生成一个新的数组。 concat()语法如下: array.concat(array1, array2, …, arrayN) 其中,array是指原数组,array…

    JavaScript 2023年5月27日
    00
  • JavaScript高级程序设计 错误处理与调试学习笔记

    下面我将详细讲解“JavaScript高级程序设计 错误处理与调试学习笔记”的完整攻略。 1. 学习目标 学习本篇笔记的目标是了解JavaScript中的错误处理和调试技术。具体包括以下方面: 理解JavaScript中的错误类型; 掌握JavaScript中的错误处理机制; 掌握JavaScript中的调试技术。 2. 错误类型及处理机制 在JavaScr…

    JavaScript 2023年5月27日
    00
  • 基于javascript html5实现多文件上传

    关于“基于JavaScript HTML5实现多文件上传”的攻略,需要考虑以下几个方面: HTML5多文件上传原理 JavaScript实现HTML5多文件上传的步骤 两个示例 HTML5多文件上传原理 HTML5提供了file对象和FormData对象,可以方便地实现文件上传功能。其中,file对象用于选择上传的文件,FormData对象用于将文件数据提交…

    JavaScript 2023年5月27日
    00
  • javascript 单例/单体模式(Singleton)

    JavaScript 单例模式是一种创建模式,旨在确保类只有一个实例,并提供全局访问点来访问该实例。在JavaScript中,单例可以用一个对象自变量实现。下面是一些创建JavaScript单例的方案。 方案一:使用字面量对象 使用字面量对象的方式简单直观,适用于有固定属性需要维护的单例模式。 const singleton = { prop1: &quot…

    JavaScript 2023年6月10日
    00
  • 详解JavaScript基于面向对象之继承

    详解JavaScript基于面向对象之继承 概述 继承是面向对象编程中非常重要的一个概念,在JavaScript中也有着广泛的运用。继承可以使代码更加简洁、优雅,使得实现代码复用更加方便。本文将详细讲解JavaScript基于面向对象之继承的完整攻略。 继承的概念 继承就是子类通过复用父类的属性和方法,使得子类可以从父类中获得所有的非私有成员。在JavaSc…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部