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轻松处理json文本方便而老古

    正则表达式搭配JS轻松处理JSON文本方便而老古 什么是正则表达式? 正则表达式是一种用于描述字符串模式的语法,通过使用简洁而强大的语法规则,可以在文本匹配、搜索、替换、验证等方面提供非常高效和灵活的处理方式。 如何在JavaScript中使用正则表达式处理JSON文本? JSON(JavaScript Object Notation)是一种轻量级的数据交换…

    JavaScript 2023年5月27日
    00
  • document.all与getElementById、getElementsByName、getElementsByTagName用法区别-getElementById

    document.all是过时的DOM属性,已被所有主流浏览器弃用。它返回当前文档中包含的所有HTML元素,以类似于数组(但不是真正的数组)的方式进行索引。 由于兼容性问题,不建议使用它。 相反,getElementById是现代JS DOM API的一部分,它可以通过指定元素的ID属性来获取文档中的单个元素。它是非常常见和实用的DOM方法之一。 例如,如果…

    JavaScript 2023年6月10日
    00
  • js取滚动条的尺寸的函数代码

    JavaScript取得滚动条的尺寸通常需要创建一个函数,以下为具体的实现方式: 创建获取滚动条尺寸的函数 function getScrollWidth() { var div = document.createElement(‘div’); // 设置样式,避免在计算尺寸时产生影响 div.style.width = ‘100px’; div.style…

    JavaScript 2023年6月11日
    00
  • JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)

    下面将分别讲解工厂模式、构造函数模式、原型模式、混合模式、动态原型模式的基础概念和应用,并且提供两个示例演示它们的具体用法。 工厂模式 工厂模式用于创建同一类型对象的方式,这种方式隐藏了对象创建的复杂性,避免了使用new关键字的过多,同时也可以使代码更加灵活。它通过一个函数来封装了所有实例化对象行为,并且返回一个新对象。下面是一个最简单的创建对象的工厂模式的…

    JavaScript 2023年5月27日
    00
  • JavaScript中的this关键字用法详解

    接下来我将为大家详细讲解“JavaScript中的this关键字用法详解”的攻略。 什么是this关键字 在JavaScript语言中,this关键字表示当前执行代码的对象。 具体而言,this指向根据当前所处的上下文环境而变化的一个关键字。这个上下文环境可以是全局环境、函数环境,或者是在某个对象中调用。 this关键字的四种调用方式 在JavaScript…

    JavaScript 2023年6月10日
    00
  • 高性能js数组去重(12种方法,史上最全)

    这里为大家详细讲解“高性能js数组去重(12种方法,史上最全)”的完整攻略。 1. 原始数组去重方法 原始数组去重方法是指使用两层循环遍历原始数组,逐个将元素与新数组中的元素作比较,如果新数组中没有相同的元素,就把该元素压入新数组。这种方法代码简单易懂,适合只有少量元素的数组去重。 代码如下: function unique1(arr) { var newA…

    JavaScript 2023年5月27日
    00
  • javascript模拟实现计算器

    为了让大家更好地理解,我先解释一下什么是JavaScript模拟实现计算器,然后再提供完整攻略。 JavaScript模拟实现计算器,是指使用JavaScript语言来模拟实现一个计算器的功能,可以通过输入数字、运算符和特殊符号等来进行基本的数学运算,如加、减、乘、除以及求余数等。 现在来说一下实现这个功能的具体攻略: HTML 部分 首先在 HTML 中创…

    JavaScript 2023年5月27日
    00
  • 原生JS:Date对象全面解析

    原生JS:Date对象全面解析 什么是Date对象 Date 对象是 JavaScript 中的内置对象,用于处理日期和时间。可以使用 new 关键字实例化一个 Date 对象。 var now = new Date(); 上述代码会返回一个 Date 对象,表示当前的日期和时间。 Date对象的方法和属性 获取年份,月份和日期 Date 对象提供了获取其表…

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