正文

轻松学会JS，打造实用计算器：从基础到功能丰富，一步步实现你的计算梦

/0 浏览量
1106

第一部分：JavaScript基础入门

1.1 初识JavaScript

JavaScript，简称JS，是一种轻量级的编程语言，主要运行在浏览器中。它使得网页不仅仅是静态的，而是可以动态交互的。学会JavaScript，你将能够为网页添加各种动态效果和功能。

1.2 变量和数据类型

在JavaScript中，变量是用来存储数据的。了解不同的数据类型，如数字、字符串、布尔值等，是编写JS代码的基础。

let age = 25;
let name = "Alice";
let isStudent = true;

1.3 控制流

控制流是指程序中执行语句的顺序。JavaScript提供了条件语句（如if-else）和循环语句（如for和while），用于控制代码的执行流程。

if (age > 18) {
  console.log("你已经成年了！");
} else {
  console.log("你还未成年。");
}

for (let i = 0; i < 5; i++) {
  console.log(i);
}

第二部分：HTML与JavaScript结合

2.1 创建HTML页面

首先，你需要创建一个HTML文件，并添加一个用于显示计算结果的元素，例如一个<input>标签。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计算器</title>
</head>
<body>
  <input type="text" id="result">
  <script src="calculator.js"></script>
</body>
</html>

2.2 JavaScript控制HTML元素

使用JavaScript，你可以读取和修改HTML元素的内容。例如，获取计算结果输入框的值。

document.getElementById("result").value = "Hello, World!";

第三部分：实现基本计算功能

3.1 添加数字输入

为了让用户能够输入数字，我们需要添加两个<input>标签，并设置它们的类型为”text”。

<input type="text" id="number1">
<input type="text" id="number2">

3.2 添加计算按钮

接下来，我们添加一个按钮，当用户点击时，将执行计算操作。

<button onclick="calculate()">计算</button>

3.3 编写计算函数

现在，我们需要编写一个名为calculate的函数，用于执行加法操作。

function calculate() {
  let number1 = parseFloat(document.getElementById("number1").value);
  let number2 = parseFloat(document.getElementById("number2").value);
  let result = number1 + number2;
  document.getElementById("result").value = result;
}

第四部分：扩展计算器功能

4.1 添加减法、乘法和除法

为了使计算器更实用，我们可以添加减法、乘法和除法功能。

function calculate(operation) {
  let number1 = parseFloat(document.getElementById("number1").value);
  let number2 = parseFloat(document.getElementById("number2").value);
  let result;

  switch (operation) {
    case "add":
      result = number1 + number2;
      break;
    case "subtract":
      result = number1 - number2;
      break;
    case "multiply":
      result = number1 * number2;
      break;
    case "divide":
      if (number2 !== 0) {
        result = number1 / number2;
      } else {
        result = "除数不能为0";
      }
      break;
    default:
      result = "无效的操作";
  }

  document.getElementById("result").value = result;
}

4.2 添加按钮和样式

现在，我们需要添加对应的按钮，并为它们设置样式。

<button onclick="calculate('add')">加</button>
<button onclick="calculate('subtract')">减</button>
<button onclick="calculate('multiply')">乘</button>
<button onclick="calculate('divide')">除</button>

第五部分：总结与展望

通过本教程，你学会了如何使用JavaScript和HTML创建一个实用的计算器。这是一个简单的例子，但你可以在此基础上添加更多功能，例如：

  • 添加历史记录功能，显示之前的计算结果。
  • 添加错误处理，避免用户输入无效数据。
  • 使用CSS美化计算器界面。

记住，编程是一个不断学习和实践的过程。希望你能通过这个计算器项目，进一步掌握JavaScript和前端开发技巧。祝你学习愉快！

-- 展开阅读全文 --