JavaScript实例–实现计算器

下面是“JavaScript实例--实现计算器”的完整攻略。

1. 需求分析

在开始编写代码之前,我们需要先确定需求。计算器需要实现以下功能:

  • 实现加、减、乘、除四则运算
  • 实现小数点的输入和计算
  • 实现清除和退格功能
  • 实现等号的计算

2. 页面结构和样式

我们需要创建一个HTML页面,包含一个输入框、数字按钮、四则运算按钮和其他功能按钮,如清除和退格按钮等。对应的HTML结构可以参考以下示例:

<div class="calculator">
  <input type="text" id="result" />
  <button class="number" id="btn-1">1</button>
  <button class="number" id="btn-2">2</button>
  <button class="number" id="btn-3">3</button>
  <button class="operator" id="btn-add">+</button>
  <button class="number" id="btn-4">4</button>
  <button class="number" id="btn-5">5</button>
  <button class="number" id="btn-6">6</button>
  <button class="operator" id="btn-sub">-</button>
  <button class="number" id="btn-7">7</button>
  <button class="number" id="btn-8">8</button>
  <button class="number" id="btn-9">9</button>
  <button class="operator" id="btn-mul">*</button>
  <button class="clear" id="btn-clear">C</button>
  <button class="number" id="btn-0">0</button>
  <button class="decimal" id="btn-dot">.</button>
  <button class="operator" id="btn-div">/</button>
  <button class="backspace" id="btn-backspace">←</button>
  <button class="equal" id="btn-equal">=</button>
</div>

我们需要为计算器添加样式,在CSS中添加样式。

3. JavaScript代码实现

3.1 获取DOM元素并添加事件监听器

const result = document.querySelector('#result');
const numbers = document.querySelectorAll('.number');
const operators = document.querySelectorAll('.operator');
const clear = document.querySelector('#btn-clear');
const backspace = document.querySelector('#btn-backspace');
const equal = document.querySelector('#btn-equal');
const decimal = document.querySelector('#btn-dot');

for (let i = 0; i < numbers.length; i++) {
  numbers[i].addEventListener('click', function () {
    appendNumber(numbers[i].textContent);
  });
}

for (let i = 0; i < operators.length; i++) {
  operators[i].addEventListener('click', function () {
    selectOperator(operators[i].textContent);
  });
}

clear.addEventListener('click', function () {
  clearResult();
});

backspace.addEventListener('click', function () {
  deleteNumber();
});

decimal.addEventListener('click', function () {
  addDecimal();
});

equal.addEventListener('click', function () {
  calculateResult();
});

3.2 实现函数

下面我们将实现函数,包括:

  • appendNumber
  • selectOperator
  • clearResult
  • deleteNumber
  • addDecimal
  • calculateResult
let currentInput = '';
let previousInput = '';
let operator = null;
let isNewOperation = false;

function appendNumber(number) {
  if (isNewOperation) {
    currentInput = number;
    isNewOperation = false;
  } else {
    currentInput += number;
  }

  updateScreen();
}

function selectOperator(selectedOperator) {
  if (operator !== null) {
    calculateResult();
  }

  previousInput = currentInput;
  currentInput = '';
  operator = selectedOperator;
}

function clearResult() {
  currentInput = '';
  previousInput = '';
  operator = null;
  isNewOperation = false;

  updateScreen();
}

function deleteNumber() {
  currentInput = currentInput.slice(0, -1);

  updateScreen();
}

function addDecimal() {
  if (currentInput === '') {
    currentInput += '0.';
  } else if (currentInput.indexOf('.') === -1) {
    currentInput += '.';
  }

  updateScreen();
}

function calculateResult() {
  const currentValue = parseFloat(currentInput);
  const previousValue = parseFloat(previousInput);

  if (isNaN(currentValue) || isNaN(previousValue)) {
    return;
  }

  switch (operator) {
    case '+':
      currentInput = previousValue + currentValue;
      break;
    case '-':
      currentInput = previousValue - currentValue;
      break;
    case '*':
      currentInput = previousValue * currentValue;
      break;
    case '/':
      currentInput = previousValue / currentValue;
      break;
    default:
      return;
  }

  isNewOperation = true;
  operator = null;

  updateScreen();
}

function updateScreen() {
  result.value = currentInput;
}

clearResult();

3.3 示例演示

下面给出两个示例:

3.3.1 演示1

  1. 点击数字按钮1,屏幕显示1。
  2. 点击加号按钮+,屏幕仍旧显示1。
  3. 点击数字按钮5,屏幕显示15。
  4. 点击等号按钮=,屏幕显示16。

3.3.2 演示2

  1. 点击数字按钮4,屏幕显示4。
  2. 点击乘号按钮*,屏幕仍旧显示4。
  3. 点击数字按钮2,屏幕显示42。
  4. 点击减号按钮-,屏幕仍旧显示42。
  5. 点击数字按钮5,屏幕显示5。
  6. 点击等号按钮=,屏幕显示37。

以上就是“JavaScript实例--实现计算器”的完整攻略,希望对你有所帮助。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript实例–实现计算器 - Python技术站

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

相关文章

  • js中的面向对象之对象常见创建方法详解

    JS中的面向对象之对象常见创建方法详解 1. 对象字面量 对象字面量是创建对象的一种简单方法,它是用一对花括号{}括起来的数据结构,其中包含一个或多个属性和属性值,属性名和属性值用冒号:”分隔,多个属性之间用逗号,`分隔。 示例代码: let student = { name: ‘Tom’, age: 20, gender: ‘male’, sayHi: f…

    JavaScript 2023年5月27日
    00
  • 使用firebug进行调试javascript的示例

    使用 Firebug 进行调试 JavaScript 是前端开发中非常常见的操作之一,下面是一个完整的攻略过程,包括如何安装和使用 Firebug 进行调试 JavaScript 的示例说明: 安装 Firebug 若要使用 Firebug 进行调试 JavaScript,首先要安装 Firebug 扩展,具体操作步骤如下: 打开 Firefox 浏览器,点…

    JavaScript 2023年6月10日
    00
  • JavaScript的Number对象的toString()方法

    当我们使用JavaScript编写程序的时候,难免会涉及到数字类型的数据操作。Number对象是JavaScript的内置对象之一,它表示数字(包括整数和浮点数)。在实际开发中,我们经常需要将数字类型的数据转化为字符串类型的数据,以便在用户界面中展示或者将数据发送给后端服务器,这时候就可以使用Number对象的toString()方法。 语法 num.toS…

    JavaScript 2023年6月10日
    00
  • js实现简单的网页换肤效果

    下面是关于“js实现简单的网页换肤效果”的完整攻略: 1. 实现思路 网页换肤效果的实现,主要是在页面加载时,用 JavaScript 动态修改 CSS 样式。 首先在页面加载时,向页面中插入一个切换主题样式的按钮或者下拉菜单,当用户点击这个按钮或者下拉菜单时,根据用户选择的样式,动态切换网页的样式。在这个过程中,需要掌握以下几个技能: 如何动态创建 &lt…

    JavaScript 2023年6月11日
    00
  • JS中内存泄漏的几种情况

    JavaScript 中的内存泄漏是指程序中使用的内存不再被需要却没有被释放,最终导致浏览器或者 Node.js 进程使用的内存越来越大,直到程序崩溃或者系统运行缓慢。 在 JavaScript 中,内存泄漏通常是由于变量、对象、闭包、事件监听器等长期存在而没有被释放引起的。这些长期存在的引用会阻止垃圾回收器回收内存,最终导致内存泄漏。     内存泄漏通常…

    JavaScript 2023年5月9日
    00
  • jQuery getJSON()+.ashx 实现分页(改进版)

    下面就为您详细讲解“jQuery getJSON()+.ashx实现分页(改进版)”的攻略。 一、准备工作 1.创建基础网页 首先,您需要创建一个基础网页,html部分如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U…

    JavaScript 2023年5月27日
    00
  • JavaScript模拟实现Promise功能的示例代码

    下面是“JavaScript模拟实现Promise功能的示例代码”的完整攻略。 什么是 Promise Promise是 JavaScript 异步编程的一种解决方案,用于处理异步操作中的回调地狱问题,提高可维护性和可读性。它解决了回调函数多层嵌套的问题,通过链式调用的形式增加可读性,并通过 then方法捕获错误。 Promise 本质上是一个对象,从它可以…

    JavaScript 2023年5月28日
    00
  • JS中的正则表达式及pattern的注意事项

    JS中的正则表达式及pattern的注意事项 在JS中,正则表达式是一个用于匹配字符串模式的对象,可以用来进行字符串的查找、替换、删除等操作,是一项非常重要的功能。在使用正则表达式的过程中,我们需要注意一些pattern的注意事项,下面就来详细介绍。 1. 正则表达式的基本语法 在JS中,我们可以通过使用RegExp对象来创建正则表达式,同时也可以使用字面量…

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