正文

轻松学会用JavaScript和DOM制作计算器：从基础到实战教程

/0 浏览量
1108

引言

计算器是我们日常生活中常用的工具，而用JavaScript和DOM制作一个简单的计算器不仅可以加深你对前端技术的理解，还能让你体验到编程的乐趣。本文将带你从基础到实战，一步步学会如何用JavaScript和DOM制作一个功能齐全的计算器。

第一部分：准备工作

1.1 环境搭建

在开始之前，确保你的电脑上已经安装了以下软件：

  • 浏览器：推荐使用Chrome或Firefox，因为它们对JavaScript的支持较好。
  • 代码编辑器：推荐使用Visual Studio Code或Sublime Text，这些编辑器提供了丰富的插件和功能，可以让你更方便地编写和调试代码。

1.2 理解JavaScript和DOM

在开始制作计算器之前，你需要对JavaScript和DOM有一定的了解。

  • JavaScript：一种轻量级的编程语言，用于网页的交互和动态效果。
  • DOM（文档对象模型）：一种用于访问和操作HTML文档的API。

第二部分：设计计算器界面

2.1 界面布局

首先，我们需要设计计算器的界面。以下是一个简单的布局示例：

+-----------------------+
|  7 8 9 /             |
|  4 5 6 *             |
|  1 2 3 -             |
|  0 . = +             |
+-----------------------+

2.2 创建HTML结构

根据界面布局，我们可以创建以下HTML结构：

<div id="calculator">
  <div class="row">
    <button onclick="press('7')">7</button>
    <button onclick="press('8')">8</button>
    <button onclick="press('9')">9</button>
    <button onclick="press('/')">/</button>
  </div>
  <div class="row">
    <button onclick="press('4')">4</button>
    <button onclick="press('5')">5</button>
    <button onclick="press('6')">6</button>
    <button onclick="press('*')">*</button>
  </div>
  <div class="row">
    <button onclick="press('1')">1</button>
    <button onclick="press('2')">2</button>
    <button onclick="press('3')">3</button>
    <button onclick="press('-')">-</button>
  </div>
  <div class="row">
    <button onclick="press('0')">0</button>
    <button onclick="press('.')">.</button>
    <button onclick="calculate()">=</button>
    <button onclick="press('+')">+</button>
  </div>
</div>
<div id="display">0</div>

2.3 添加CSS样式

为了使计算器看起来更美观，我们可以添加一些CSS样式：

#calculator {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 200px;
  height: 300px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
}

.row {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

button {
  width: 20%;
  height: 30px;
  border: none;
  border-radius: 5px;
  background-color: #f2f2f2;
  font-size: 16px;
  cursor: pointer;
}

#display {
  width: 100%;
  height: 40px;
  margin-bottom: 10px;
  text-align: right;
  font-size: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
}

第三部分：编写JavaScript代码

3.1 初始化变量

在JavaScript中，我们需要定义一些变量来存储计算器的状态：

let currentNumber = 0;
let previousNumber = 0;
let operator = '';
let isCurrentNumber = true;

3.2 编写press函数

press函数用于处理按钮点击事件，将按钮上的数字或运算符添加到计算器的显示中：

function press(value) {
  if (isCurrentNumber) {
    if (value === '.') {
      document.getElementById('display').innerText += value;
    } else {
      document.getElementById('display').innerText = value;
    }
    isCurrentNumber = false;
  } else {
    document.getElementById('display').innerText += value;
  }
}

3.3 编写calculate函数

calculate函数用于计算当前的表达式，并显示结果：

function calculate() {
  if (operator === '+' || operator === '-' || operator === '*' || operator === '/') {
    previousNumber = parseFloat(document.getElementById('display').innerText);
    currentNumber = 0;
    operator = '';
    isCurrentNumber = true;
  } else {
    currentNumber = parseFloat(document.getElementById('display').innerText);
    switch (operator) {
      case '+':
        document.getElementById('display').innerText = previousNumber + currentNumber;
        break;
      case '-':
        document.getElementById('display').innerText = previousNumber - currentNumber;
        break;
      case '*':
        document.getElementById('display').innerText = previousNumber * currentNumber;
        break;
      case '/':
        document.getElementById('display').innerText = previousNumber / currentNumber;
        break;
    }
  }
}

3.4 添加运算符

为了使计算器支持运算符，我们需要修改press函数：

function press(value) {
  if (isCurrentNumber) {
    if (value === '.') {
      document.getElementById('display').innerText += value;
    } else {
      document.getElementById('display').innerText = value;
    }
    isCurrentNumber = false;
  } else {
    if (value === '+' || value === '-' || value === '*' || value === '/') {
      operator = value;
      previousNumber = parseFloat(document.getElementById('display').innerText);
      document.getElementById('display').innerText = '';
      isCurrentNumber = true;
    } else {
      document.getElementById('display').innerText += value;
    }
  }
}

第四部分：测试和优化

现在，你已经完成了计算器的制作。你可以将HTML、CSS和JavaScript代码保存到一个文件中，并在浏览器中打开它。你应该能看到一个功能齐全的计算器。

为了优化计算器，你可以考虑以下功能：

  • 添加清除和删除按钮。
  • 添加更多运算符，如平方根、百分比等。
  • 添加错误处理，如除以零等。

结语

通过本文的学习，你不仅学会了如何用JavaScript和DOM制作一个简单的计算器，还加深了对前端技术的理解。希望这篇文章能帮助你更好地掌握编程技能。

-- 展开阅读全文 --