使用JavaScript构建在线计算器-猿码集

1. 简介

计算器是计算数学式的工具。它通常用于学生，工程师和科学家在研究或实际工作中需要计算的情况。通过计算器，我们可以实现各种数学计算，如加法，减法，乘法，除法和三角函数等。现在，我们可以使用JavaScript来构建一个在线计算器，这使得用户能够随时随地进行计算。

2. 开发环境和工具

2.1 编辑器

为了使用JavaScript来构建在线计算器，我们需要一个编辑器来编写代码。常见的编辑器有Visual Studio Code，Sublime Text和Atom等等。本文将使用Visual Studio Code作为编辑器。

2.2 浏览器

JavaScript是一种运行在浏览器中的编程语言。在实现在线计算器之前，我们需要选择一个现代浏览器，如Google Chrome，Mozilla Firefox和Microsoft Edge等。本文将使用Google Chrome浏览器作为我们开发计算器的运行环境。

2.3 开发框架

JavaScript具有强大的能力，但在构建应用程序时，我们往往需要一些帮助。开发框架就提供了帮助，它们是在JavaScript上构建的应用程序的基础结构。本文将使用jQuery框架来实现在线计算器的构建。

3. HTML结构

在开发在线计算器之前，我们需要建立HTML结构。下面是HTML代码示例：

<!DOCTYPE html>
<html>
  <head>
    <title>在线计算器</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="calculator">
      <h1>在线计算器</h1>
      <form name="calculator">
        <input type="text" name="display" id="display" disabled>
        <br>
        <input type="button" name="one" value="1" onclick="addToDisplay('1')">
        <input type="button" name="two" value="2" onclick="addToDisplay('2')">
        <input type="button" name="three" value="3" onclick="addToDisplay('3')">
        <input type="button" name="plus" value="+" onclick="addToDisplay('+')">
        <br>
        <input type="button" name="four" value="4" onclick="addToDisplay('4')">
        <input type="button" name="five" value="5" onclick="addToDisplay('5')">
        <input type="button" name="six" value="6" onclick="addToDisplay('6')">
        <input type="button" name="minus" value="-" onclick="addToDisplay('-')">
        <br>
        <input type="button" name="seven" value="7" onclick="addToDisplay('7')">
        <input type="button" name="eight" value="8" onclick="addToDisplay('8')">
        <input type="button" name="nine" value="9" onclick="addToDisplay('9')">
        <input type="button" name="times" value="×" onclick="addToDisplay('*')">
        <br>
        <input type="button" name="clear" value="C" onclick="clearDisplay()">
        <input type="button" name="zero" value="0" onclick="addToDisplay('0')">
        <input type="button" name="equals" value="=" onclick="calculate()">
        <input type="button" name="divided by" value="÷" onclick="addToDisplay('/')">
      </form>
    </div>
    <script src="jquery.min.js"></script>
    <script src="main.js"></script>
  </body>
</html>

该HTML代码中，我们创建了一个名为"calculator"的div元素，该元素包含所有我们需要的表单和按钮。除此之外，我们还链接了一个名为"style.css"的样式表和两个脚本文件，"jquery.min.js"和"main.js"。

4. CSS样式

为了使计算器更美观，我们需要编写一些CSS代码来定义样式。下面是CSS代码示例：

body {
  font-family: Arial, sans-serif;
  background-color: #f2f2f2;
}
.calculator {
  width: 300px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 5px;
  padding: 10px;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}
h1 {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
}
form {
  text-align: center;
}
input[type="text"] {
  width: 100%;
  font-size: 24px;
  padding: 10px;
  margin-bottom: 20px;
  border-radius: 5px;
  border: 1px solid #ccc;
  text-align: right;
}
input[type="button"] {
  width: 50px;
  height: 50px;
  font-size: 18px;
  margin: 5px;
  border-radius: 5px;
  border: none;
  background-color: #eee;
  color: #333;
  cursor: pointer;
}
input[type="button"]:hover {
  background-color: #ccc;
  color: #fff;
}

该CSS代码通过为元素设置不同的样式属性，实现了在线计算器界面的设计。例如，我们使用了圆角和阴影来使"calculator"元素看起来更加美观，使用了不同的字体大小和颜色来提高可读性。

5. JavaScript代码

5.1 加法和减法

下面是用于加法和减法的JavaScript代码：

function addToDisplay(char) {
  var display = $("#display");
  var val = display.val();
  if (val === "") {
    if (char === "+" || char === "-") {
      display.val("0" + char);
    } else {
      display.val(char);
    }
  } else {
    if (char === "+" || char === "-") {
      if (val.slice(-1) === "+" || val.slice(-1) === "-") {
        val = val.slice(0, -1) + char;
      } else {
        val += char;
      }
    } else {
      val += char;
    }
    display.val(val);
  }
}

该函数用于向显示器添加字符。如果显示器为空，它将在第一个字符添加数字或运算符。如果不为空，则为字符串添加数字或运算符。如果最后一个字符是运算符，则替换为新运算符。

5.2 乘法和除法

function calculate() {
  var display = $("#display");
  var equation = display.val();
  var answer;
  if (equation !== "") {
    try {
      answer = eval(equation);
      display.val(answer.toFixed(2));
    } catch (err) {
      console.log(err.message);
    }
  }
}
function clearDisplay() {
  var display = $("#display");
  display.val("");
}

该函数用于计算结果。它从显示器中获取方程式字符串，并使用eval函数将其计算为结果。如果出现异常，它将在控制台中记录错误信息。我们还为显示器添加了一个名为"clearDisplay"的辅助函数，以清除显示器。

5.3 完整代码

现在，我们已经完整地编写了JavaScript代码：

function addToDisplay(char) {
  var display = $("#display");
  var val = display.val();
  if (val === "") {
    if (char === "+" || char === "-") {
      display.val("0" + char);
    } else {
      display.val(char);
    }
  } else {
    if (char === "+" || char === "-") {
      if (val.slice(-1) === "+" || val.slice(-1) === "-") {
        val = val.slice(0, -1) + char;
      } else {
        val += char;
      }
    } else {
      val += char;
    }
    display.val(val);
  }
}
function calculate() {
  var display = $("#display");
  var equation = display.val();
  var answer;
  if (equation !== "") {
    try {
      answer = eval(equation);
      display.val(answer.toFixed(2));
    } catch (err) {
      console.log(err.message);
    }
  }
}
function clearDisplay() {
  var display = $("#display");
  display.val("");
}

6. 结论

通过使用HTML，CSS和JavaScript，我们可以构建一个简单但实用的在线计算器。通过了解开发环境和工具，HTML结构，CSS样式和JavaScript代码，我们可以更好地理解如何使用这些技术来构建Web应用程序。随着我们练习和学习更多的技术，我们可以不断地提高我们的代码水平，并构建更大更复杂的应用程序。

使用JavaScript构建在线计算器