程序员的天堂，网页制作的利器：div+表格应用实例解析

2023-10-28 17:26:14

使用 DIV 和表格构建计算器布局：逐步指南

在信息爆炸的时代，网页设计已成为现代生活不可或缺的一部分。它不仅让获取信息变得轻而易举，还能让我们表达思想和情感。DIV 和表格是网页设计中用于构建布局的两大常用元素，可帮助我们创建各种效果。今天，我们将探讨如何使用 DIV 和表格在网页上构建一个计算器布局。

步骤 1：创建 DIV 容器

首先，创建一个 DIV 容器作为计算器的容器。它将容纳计算器中的所有元素。

<div id="calculator">
  <!-- 计算器中的各种元素 -->
</div>

步骤 2：创建表格

在 DIV 容器中，创建一个表格，用于排列计算器中的按钮。

<table id="calculator-buttons">
  <tr>
    <td><button>7</button></td>
    <td><button>8</button></td>
    <td><button>9</button></td>
    <td><button>+</button></td>
  </tr>
  <tr>
    <td><button>4</button></td>
    <td><button>5</button></td>
    <td><button>6</button></td>
    <td><button>-</button></td>
  </tr>
  <tr>
    <td><button>1</button></td>
    <td><button>2</button></td>
    <td><button>3</button></td>
    <td><button>*</button></td>
  </tr>
  <tr>
    <td><button>0</button></td>
    <td><button>.</button></td>
    <td><button>=</button></td>
    <td><button>/</button></td>
  </tr>
</table>

步骤 3：设置 DIV 和表格样式

接下来，设置 DIV 和表格的样式，以便它们能够正常显示在网页上。

#calculator {
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;
  padding: 10px;
}

#calculator-buttons {
  width: 100%;
  border-collapse: collapse;
}

#calculator-buttons td {
  width: 25%;
  height: 50px;
  border: 1px solid #ccc;
  text-align: center;
  vertical-align: middle;
}

#calculator-buttons button {
  width: 100%;
  height: 100%;
  border: none;
  background-color: #fff;
  color: #000;
  font-size: 20px;
}

步骤 4：添加计算器功能

最后，添加计算器功能，以便它能够正常使用。

// 获取计算器中的各种元素
const calculator = document.getElementById("calculator");
const buttons = document.querySelectorAll("#calculator-buttons button");
const display = document.getElementById("calculator-display");

// 创建一个计算器对象
const calculatorObject = {
  // 计算器的当前值
  currentValue: 0,

  // 计算器的操作符
  currentOperator: null,

  // 计算器的结果
  result: 0,

  // 计算器是否正在计算
  isCalculating: false,
};

// 为计算器按钮添加点击事件监听器
buttons.forEach((button) => {
  button.addEventListener("click", () => {
    // 获取按钮上的值
    const value = button.textContent;

    // 处理数字按钮
    if (!isNaN(value)) {
      // 如果计算器正在计算，则先清空结果
      if (calculatorObject.isCalculating) {
        calculatorObject.result = 0;
        calculatorObject.isCalculating = false;
      }

      // 将数字添加到计算器的当前值中
      calculatorObject.currentValue += value;

      // 更新显示屏
      display.textContent = calculatorObject.currentValue;
    }

    // 处理操作符按钮
    else if (value === "+" || value === "-" || value === "*" || value === "/") {
      // 如果计算器正在计算，则先计算出结果
      if (calculatorObject.isCalculating) {
        calculatorObject.result = calculateResult(calculatorObject.currentValue, calculatorObject.currentOperator, calculatorObject.result);
      }

      // 将操作符保存到计算器中
      calculatorObject.currentOperator = value;

      // 设置计算器为正在计算状态
      calculatorObject.isCalculating = true;

      // 更新显示屏
      display.textContent = calculatorObject.currentValue + " " + calculatorObject.currentOperator;
    }

    // 处理等于按钮
    else if (value === "=") {
      // 计算出结果
      calculatorObject.result = calculateResult(calculatorObject.currentValue, calculatorObject.currentOperator, calculatorObject.result);

      // 更新显示屏
      display.textContent = calculatorObject.result;

      // 设置计算器为非正在计算状态
      calculatorObject.isCalculating = false;
    }
  });
});

// 计算结果
function calculateResult(num1, operator, num2) {
  switch (operator) {
    case "+":
      return num1 + num2;
    case "-":
      return num1 - num2;
    case "*":
      return num1 * num2;
    case "/":
      return num1 / num2;
    default:
      return 0;
  }
}