正文

学会用JS轻松打造计算器：从基础到高级功能一步到位

/0 浏览量
0821

引言

计算器是日常生活中不可或缺的工具，而随着Web技术的发展，我们可以利用JavaScript（JS）来轻松实现一个功能全面、操作简便的计算器。在这篇文章中，我们将一步步带你从搭建一个简单的计算器界面开始，逐渐添加高级功能，让你能够掌握如何使用JS打造一个属于自己的计算器。

第1节：基础界面搭建

1.1 选择合适的HTML结构

首先，我们需要为计算器选择一个合适的HTML结构。一个典型的计算器通常包括数字键、操作符键以及一个显示屏。

<div id="calculator">
  <input type="text" id="display" disabled>
  <div id="buttons">
    <button onclick="appendValue('1')">1</button>
    <button onclick="appendValue('2')">2</button>
    <!-- 更多数字和操作符按钮 -->
    <button onclick="calculate()">=</button>
  </div>
</div>

1.2 编写CSS样式

为了让计算器看起来更加美观，我们需要添加一些CSS样式。

#calculator {
  width: 200px;
  margin: auto;
}

#display {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
}

button {
  width: 20%;
  padding: 10px;
  margin: 2px;
}

第2节：JavaScript核心逻辑

2.1 创建一个全局变量

在JS中，我们首先需要创建一个全局变量来存储用户输入的表达式。

let currentExpression = '';

2.2 编写appendValue函数

这个函数负责将用户点击的数字或操作符添加到全局变量中。

function appendValue(value) {
  currentExpression += value;
  document.getElementById('display').value = currentExpression;
}

2.3 编写calculate函数

当用户点击等号时，这个函数将解析当前表达式并计算结果。

function calculate() {
  try {
    const result = eval(currentExpression);
    document.getElementById('display').value = result;
    currentExpression = result.toString();
  } catch (error) {
    document.getElementById('display').value = 'Error';
    currentExpression = '';
  }
}

第3节：高级功能拓展

3.1 支持科学计算

为了使计算器更加强大，我们可以添加科学计算功能，如三角函数、指数运算等。

function appendScientificValue(value) {
  currentExpression += value;
  document.getElementById('display').value = currentExpression;
}

function calculateScientific() {
  try {
    const result = eval(currentExpression);
    document.getElementById('display').value = result;
    currentExpression = result.toString();
  } catch (error) {
    document.getElementById('display').value = 'Error';
    currentExpression = '';
  }
}

3.2 实现历史记录

我们可以添加一个功能，记录用户的计算历史。

let history = [];

function recordHistory() {
  history.push(currentExpression);
}

function showHistory() {
  let historyDisplay = '';
  for (let i = 0; i < history.length; i++) {
    historyDisplay += `${i + 1}: ${history[i]} = ${eval(history[i])}\n`;
  }
  document.getElementById('display').value = historyDisplay;
}

总结

通过以上步骤，我们成功创建了一个包含基础和高级功能的计算器。在这个过程中，我们学习了如何使用HTML、CSS和JavaScript来实现一个完整的计算器。当然，这只是一个起点，你可以根据自己的需求进一步扩展和优化你的计算器。希望这篇文章能够帮助你更好地理解和应用JavaScript，打造出更多有趣的项目。

-- 展开阅读全文 --