JavaScript制作简版计算器,提供加减乘除功能

简介: JavaScript制作简版计算器,提供加减乘除功能

📚 引言

前端开发的奇妙之旅中,构建一个既实用又具教育意义的计算器是提升技能的绝佳途径。本篇笔记将引导你从零开始,打造一个增强版的JavaScript计算器。这个计算器不仅支持基本的加减乘除运算,还能实时显示计算过程,让你一目了然每一步操作及其结果。👨‍💻✨


实现效果 🚀


HTML结构设计 🧱

首先,我们构建一个简洁而功能丰富的HTML结构,包括输入结果显示区和计算公式展示区。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>简易计算器</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="calculator">
  <div class="display-container">
    <label for="displayResult"></label>
    <input type="text" id="displayResult" disabled />
    <p id="displayFormula" class="formula"></p>
  </div>
  <div id="buttons">
    <!-- 数字按钮 -->
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
    <button>6</button>
    <button>7</button>
    <button>8</button>
    <button>9</button>
    <button>0</button>
    <!-- 运算符按钮 -->
    <button>+</button>
    <button>-</button>
    <button>*</button>
    <button>/</button>
    <!-- 特殊按钮 -->
    <button id="clear">C</button>
    <button id="equals">=</button>
  </div>
</div>
<script src="script.js"></script>
</body>
</html>

CSS样式美化 🎨

计算器增添视觉吸引力,我们通过CSS进行细致的样式定制。

/* style.css */
#calculator {
    width: 300px;
    margin: 50px auto;
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.display-container {
    text-align: center;
    margin-bottom: 20px;
}
#displayResult {
    width: 100%;
    margin-bottom: 5px;
    padding: 5px;
    font-size: 24px;
    text-align: right;
}
.formula {
    color: #666;
    font-size: 16px;
    text-align: right;
}
button {
    width: 50px;
    height: 50px;
    margin: 5px;
    font-size: 20px;
    cursor: pointer;
}
button:hover {
    background-color: #ddd;
}

JavaScript逻辑实现 💻

核心部分来了!我们编写JavaScript逻辑,让计算器“活”起来,能够响应用户的每一次点击,实时更新显示结果和计算公式。

// script.js
document.addEventListener('DOMContentLoaded', () => {
  const displayResult = document.getElementById('displayResult');
  const displayFormula = document.getElementById('displayFormula');
  let firstValue = null;
  let operator = null;
  let currentInput = '';
  let formulaDisplay = '';
  document.getElementById('buttons').addEventListener('click', (event) => {
    const target = event.target;
    if (target.tagName !== 'BUTTON') return;
    const value = target.textContent;
    // 数字输入
    if (!isNaN(value)) {
      currentInput += value;
      displayResult.value = currentInput;
      formulaDisplay += value;
      displayFormula.textContent = formulaDisplay;
    }
    // 运算符处理
    else if ('+-*/'.includes(value)) {
      if (operator && !currentInput) return; // 如果已有运算符且未输入新数字,则不处理
      if (firstValue === null) {
        firstValue = parseFloat(currentInput);
        formulaDisplay += ` ${value} `;
      } else {
        // 计算并更新显示
        const secondValue = parseFloat(currentInput);
        firstValue = operate(operator, firstValue, secondValue);
        formulaDisplay = `${firstValue} ${value} `;
        displayFormula.textContent = formulaDisplay;
      }
      operator = value;
      currentInput = '';
    }
    // 等号计算
    else if (value === '=') {
      if (operator && currentInput) {
        const secondValue = parseFloat(currentInput);
        firstValue = operate(operator, firstValue, secondValue);
        formulaDisplay += ` = ${firstValue}`;
        displayFormula.textContent = formulaDisplay;
        displayResult.value = firstValue;
        currentInput = '';
        operator = null;
      }
    }
    // 清除输入
    else if (value === 'C') {
      firstValue = null;
      operator = null;
      currentInput = '';
      formulaDisplay = '';
      displayResult.value = '0';
      displayFormula.textContent = formulaDisplay;
    }
  });
  function operate(op, a, b) {
    switch (op) {
      case '+': return a + b;
      case '-': return a - b;
      case '*': return a * b;
      case '/':
        if (b === 0) throw new Error('Division by zero');
        return a / b;
      default: throw new Error('Invalid operation');
    }
  }
});

关键点解析 🔍

  • 显示逻辑:我们通过两个<div>分别展示最终结果和计算公式,使得用户在获得答案的同时,也能清楚地看到整个计算过程。
  • 运算处理:在operate函数中,我们封装了基本的数学运算逻辑,并特别处理了除法中的除以零错误。
  • 事件处理:每个按钮点击事件都被精确捕捉,并根据点击内容执行相应的操作,如数字输入、运算符应用、计算结果显示及清除操作。

🎖 总结

通过上述步骤,我们成功构建了一个不仅能够完成基础数学运算,还能清晰展示计算过程的增强版JavaScript计算器。这个项目不仅加深了你对JavaScript事件处理、DOM操作以及基本算法的理解,还展示了如何通过前端技术提升用户体验。希望这次实战经验能够成为你编程旅程中的一个闪亮里程碑,激励你在前端开发领域不断探索与成长!🚀

目录
相关文章
|
15天前
|
JavaScript
网页CAD(JS Vue 预览dwg)如何二次开发常用的CAD编辑功能
```markdown # CAD网页编程概览 - 使用mxcad库,实现CAD操作如删除、复制、镜像、移动和旋转。 - `erase()`方法删除实体,`clone()`配合`transformBy()`用于复制和编辑。 - `mirror()`和`transformBy(setMirror)`执行镜像操作,基于参考线。 - `move()`和`transformBy(setToTranslation)`实现移动功能。 - `rotate()`和`transformBy(setToRotation)`进行旋转,支持角度输入。 ```
网页CAD(JS Vue 预览dwg)如何二次开发常用的CAD编辑功能
|
9天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的多功能智能手机阅读APP附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的多功能智能手机阅读APP附带文章源码部署视频讲解等
12 1
|
22天前
|
JSON 缓存 前端开发
JavaScript 新特性:新增声明命令与解构赋值的强大功能
JavaScript 新特性:新增声明命令与解构赋值的强大功能
|
25天前
|
SQL Web App开发 JavaScript
业务功能常用的JS代码片段
业务功能常用的JS代码片段
16 3
|
16天前
|
前端开发 JavaScript
前端 JS 经典:封装全屏功能
前端 JS 经典:封装全屏功能
8 0
|
20天前
|
前端开发 JavaScript 容器
技术经验解读:个人练习:使用HTML+CSS3制作图片轮播功能(不使用JavaScript)
技术经验解读:个人练习:使用HTML+CSS3制作图片轮播功能(不使用JavaScript)
24 0
|
21天前
|
JavaScript 前端开发
技术经验分享:javascript倒计数功能
技术经验分享:javascript倒计数功能
14 0
|
22天前
|
JavaScript 前端开发 算法
详细解读24点计算器的Javascript实现
详细解读24点计算器的Javascript实现
|
22天前
|
前端开发 JavaScript 安全
解锁 JavaScript ES6:函数与对象的高级扩展功能
解锁 JavaScript ES6:函数与对象的高级扩展功能
|
26天前
|
JavaScript 安全 前端开发
JS实现复制功能
JS实现复制功能
11 0