用HTML、CSS和JavaScript打造你的首个计算器

2022-11-25 22:19:48

掌握前端开发的入门利器：用 HTML、CSS 和 JavaScript 构建你的第一个计算器

序言

在当今数字化的时代，编程不再是程序员的专利。借助 HTML、CSS 和 JavaScript 这三大前端开发利器，每个人都可以轻松开启自己的编程之旅。在这篇全面的指南中，我们将带你一步步打造你的第一个计算器，让你亲身体验前端开发的魅力，掌握它的精髓。

HTML：构建用户界面

HTML（超文本标记语言）是网页的基础，它负责定义网页的结构和内容。在我们的计算器中，HTML 主要用于构建用户界面。

代码示例：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <h1>计算器</h1>
  <input type="text" id="num1" placeholder="输入第一个数字">
  <select id="operator">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
  </select>
  <input type="text" id="num2" placeholder="输入第二个数字">
  <button type="button" id="calculate">计算</button>
  <div id="result"></div>
</body>
</html>

这段代码定义了计算器的基本框架，包括标题、输入框、下拉列表和一个按钮，用来触发计算过程。

CSS：美化界面

CSS（层叠样式表）用于设置网页的样式，让其变得美观且易用。在我们的计算器中，CSS 主要用于美化用户界面。

代码示例：

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #ffffff;
}

h1 {
  font-size: 24px;
  color: #000000;
}

input {
  width: 100px;
  height: 25px;
  padding: 5px;
  border: 1px solid #cccccc;
  border-radius: 5px;
}

select {
  width: 100px;
  height: 25px;
  padding: 5px;
  border: 1px solid #cccccc;
  border-radius: 5px;
}

button {
  width: 100px;
  height: 25px;
  padding: 5px;
  border: 1px solid #cccccc;
  border-radius: 5px;
  background-color: #337ab7;
  color: #ffffff;
}

#result {
  font-size: 18px;
  color: #000000;
}

这段代码设置了网页的字体、颜色、文本框样式、按钮样式和结果显示样式，让计算器看起来更加美观。

JavaScript：实现计算逻辑

JavaScript 是一种脚本语言，主要用于在网页上实现动态效果和交互性。在我们的计算器中，JavaScript 主要用于实现计算逻辑。

代码示例：

const num1 = document.getElementById('num1');
const num2 = document.getElementById('num2');
const operator = document.getElementById('operator');
const result = document.getElementById('result');

const calculate = () => {
  const n1 = parseFloat(num1.value);
  const n2 = parseFloat(num2.value);
  const op = operator.value;

  let res;

  switch (op) {
    case '+':
      res = n1 + n2;
      break;
    case '-':
      res = n1 - n2;
      break;
    case '*':
      res = n1 * n2;
      break;
    case '/':
      res = n1 / n2;
      break;
  }

  result.innerHTML = res;
};

document.getElementById('calculate').addEventListener('click', calculate);