前端神器！HTML/CSS/JS计算器带你走进编程世界

2023-10-15 22:05:40

用 HTML/CSS/JS 制作一个简单计算器的终极指南

使用 HTML/CSS/JS 制作一个简单计算器的完整指南

前言

计算器在我们的日常生活中无处不在，从简单的加减到复杂的方程计算，它们帮助我们轻松地处理数字。本文将逐步指导您使用 HTML、CSS 和 JavaScript 从头开始制作一个简单的计算器。

一、HTML 结构

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <div id="calculator">
    <input type="text" id="display" readonly>
    <div id="buttons">
      <button class="number" value="1">1</button>
      <button class="number" value="2">2</button>
      <button class="number" value="3">3</button>
      <button class="operator" value="+">+</button>
      <button class="number" value="4">4</button>
      <button class="number" value="5">5</button>
      <button class="number" value="6">6</button>
      <button class="operator" value="-">-</button>
      <button class="number" value="7">7</button>
      <button class="number" value="8">8</button>
      <button class="number" value="9">9</button>
      <button class="operator" value="*">*</button>
      <button class="clear" value="c">C</button>
      <button class="number" value="0">0</button>
      <button class="equals" value="=">=</button>
      <button class="operator" value="/">/</button>
    </div>
  </div>
</body>
</html>

二、CSS 样式

#calculator {
  width: 300px;
  margin: 0 auto;
  padding: 10px;
  border: 1px solid #ccc;
}

#display {
  width: 100%;
  height: 50px;
  background-color: #f5f5f5;
  text-align: right;
  padding: 10px;
}

#buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.button {
  width: 50px;
  height: 50px;
  margin: 5px;
  background-color: #ccc;
  border: 1px solid #ccc;
  cursor: pointer;
}

.number {
  background-color: #fff;
}

.operator {
  background-color: #f5f5f5;
}

.clear {
  background-color: #f5f5f5;
  color: #fff;
}

.equals {
  background-color: #f5f5f5;
  color: #fff;
  width: 100%;
}

三、JavaScript 逻辑

const display = document.getElementById('display');
const buttons = document.querySelectorAll('.button');

let firstOperand = null;
let secondOperand = null;
let operator = null;

buttons.forEach((button) => {
  button.addEventListener('click', () => {
    const value = button.value;

    if (value >= '0' && value <= '9') {
      if (secondOperand === null) {
        firstOperand = firstOperand === null ? value : firstOperand + value;
        display.value = firstOperand;
      } else {
        secondOperand = secondOperand === null ? value : secondOperand + value;
        display.value = secondOperand;
      }
    } else if (value === '+' || value === '-' || value === '*' || value === '/') {
      operator = value;
    } else if (value === 'c') {
      firstOperand = null;
      secondOperand = null;
      operator = null;
      display.value = 0;
    } else if (value === '=') {
      if (firstOperand !== null && secondOperand !== null && operator !== null) {
        let result;

        switch (operator) {
          case '+':
            result = Number(firstOperand) + Number(secondOperand);
            break;
          case '-':
            result = Number(firstOperand) - Number(secondOperand);
            break;
          case '*':
            result = Number(firstOperand) * Number(secondOperand);
            break;
          case '/':
            result = Number(firstOperand) / Number(secondOperand);
            break;
        }

        display.value = result;
        firstOperand = result;
        secondOperand = null;
        operator = null;
      }
    }
  });
});

四、代码示例

<!-- HTML 结构 -->
<div id="calculator">
  <input type="text" id="display" readonly>
  <div id="buttons">
    <button class="number" value="1">1</button>
    <!-- 省略其他按钮 -->
    <button class="equals" value="=">=</button>
  </div>
</div>

/* CSS 样式 */
#calculator {
  width: 300px;
  margin: 0 auto;
  padding: 10px;
  border: 1px solid #ccc;
}

/* 省略其他样式 */

/* JavaScript 逻辑 */
const display = document.getElementById('display');
const buttons = document.querySelectorAll('.button');

let firstOperand = null;
let secondOperand = null;
let operator = null;

buttons.forEach((button) => {
  button.addEventListener('click', () => {
    const value = button.value;

    // 省略其他逻辑
  });
});