快速使用HTML、CSS、JavaScript编写一个简单计算器

一、编写HTML结构

1.1 创建文件

二、编写CSS样式

2.1 编写好看样式

2.2 引入css样式

三、编写JavaScript逻辑代码

3.1 创建操作文件

3.2 引入js文件

3.3 整体代码

四、运行

一、编写HTML结构

1.1 创建文件

我们在项目目录当中创建一个名为 index.html的文件，在文件中编写以下内容。

以下主要用到了div块级标签和button按钮， onclick是处理按钮的点击事件。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>香菜的计算器</title>
  </head>
  <body>
    <div class="calculator">
      <div class="display" id="display">0</div>
      <div class="keys">
        <button onclick="appendToDisplay('7')">7</button>
        <button onclick="appendToDisplay('8')">8</button>
        <button onclick="appendToDisplay('9')">9</button>
        <button onclick="operate('+')" class="option">+</button>
        <button onclick="appendToDisplay('4')">4</button>
        <button onclick="appendToDisplay('5')">5</button>
        <button onclick="appendToDisplay('6')">6</button>
        <button onclick="operate('-')" class="option">-</button>
        <button onclick="appendToDisplay('1')">1</button>
        <button onclick="appendToDisplay('2')">2</button>
        <button onclick="appendToDisplay('3')">3</button>
        <button onclick="operate('*')" class="option">×</button>
        <button onclick="appendToDisplay('0')">0</button>
        <button onclick="appendToDisplay('.')">.</button>
        <button onclick="calculate()" class="option">=</button>
        <button onclick="operate('/')" class="option">÷</button>
        <button onclick="clearDisplay()" class="option">C</button>
      </div>
    </div>
  </body>
</html>

二、编写CSS样式

2.1 编写好看样式

因为HTML结构是比较单一化的，我们需要使用CSS样式对它进行美化。

首先在根目录下创建一个名为 css的目录，在css目录下创建 main.css样式文件。

代码如下：

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
  }
  .calculator {
    background: rgba(78, 78, 82, 0.5);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  .display {
    font-size: 2em;
    padding: 10px;
    background-color: #22242980; /* 50% 半透明 */
    text-align: right;
    color: #e8e9e9;
    border-radius: 5px;
    margin-bottom: 10px;
  }
  .keys {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
  }
  button {
    padding: 10px;
    font-size: 1.2em;
    border: none;
    border-radius: 5px;
    background-color: #7a7a7d;
    color: #ffffff;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  button:hover {
    background-color: #d0d0d0;
  }

  button.option {
    background: #ff9727;
  }

2.2 引入css样式

在index.html 文件的 head标签中，我们要引入css样式，编写以下标签。

<link rel="stylesheet" href="css/main.css">

三、编写JavaScript逻辑代码

3.1 创建操作文件

我们现在有了结构和样式，但是缺少具体的操作。需要使用JavaScript来实现具体的计算操作。

首先创建一个名为 js的目录，在js目录下创建calculartor.js文件。

代码如下

// 当前输入的值，初始值为0
let currentInput = "0";

// 当前操作符，默认为null
let currentOperator = null;

// 第一操作数，默认为null
let firstOperand = null;

// 将数字或小数点添加到显示屏上
function appendToDisplay(value) {
  if (currentInput === "0" && value !== ".") {
    // 如果当前输入为0，并且value不是小数点，直接用value替换currentInput
    currentInput = value;
  } else {
    // 否则，在currentInput后面追加value
    currentInput += value;
  }
  // 更新显示屏上的内容
  document.getElementById("display").innerText = currentInput;
}

// 清空显示屏
function clearDisplay() {
  currentInput = "0";
  document.getElementById("display").innerText = currentInput;
}

// 记录当前操作符，并将当前输入值作为第一操作数
function operate(operator) {
  if (currentOperator !== null) {
    // 如果当前已经记录有操作符，则先计算结果
    calculate();
  }
  // 记录第一操作数为当前输入值
  firstOperand = currentInput;

  // 记录当前操作符
  currentOperator = operator;

  // 将当前输入值重置为0
  currentInput = "0";
}

// 根据当前操作符和第二操作数计算结果，并将结果显示在屏幕上
function calculate() {
  // 如果当前未记录操作符或第一操作数，则直接返回
  if (currentOperator === null || firstOperand === null) return;

  let result;

  // 获取第二操作数
  const secondOperand = currentInput;

  // 根据当前操作符进行计算
  switch (currentOperator) {
    case "+":
      result = parseFloat(firstOperand) + parseFloat(secondOperand);
      break;
    case "-":
      result = parseFloat(firstOperand) - parseFloat(secondOperand);
      break;
    case "*":
      result = parseFloat(firstOperand) * parseFloat(secondOperand);
      break;
    case "/":
      result = parseFloat(firstOperand) / parseFloat(secondOperand);
      break;
    default:
      // 如果操作符不是加、减、乘、除，则直接返回
      return;
  }

  // 将计算结果更新为当前输入值
  currentInput = result.toString();

  // 重置当前操作符和第一操作数
  currentOperator = null;
  firstOperand = null;

  // 更新显示屏上的内容
  document.getElementById("display").innerText = currentInput;
}

3.2 引入js文件

在index.html文件中的 body标签下，编写以下内容。

 <script src="js/calculartor.js"></script>

3.3 整体代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>香菜的计算器</title>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <div class="calculator">
      <div class="display" id="display">0</div>
      <div class="keys">
        <button onclick="appendToDisplay('7')">7</button>
        <button onclick="appendToDisplay('8')">8</button>
        <button onclick="appendToDisplay('9')">9</button>
        <button onclick="operate('+')" class="option">+</button>
        <button onclick="appendToDisplay('4')">4</button>
        <button onclick="appendToDisplay('5')">5</button>
        <button onclick="appendToDisplay('6')">6</button>
        <button onclick="operate('-')" class="option">-</button>
        <button onclick="appendToDisplay('1')">1</button>
        <button onclick="appendToDisplay('2')">2</button>
        <button onclick="appendToDisplay('3')">3</button>
        <button onclick="operate('*')" class="option">×</button>
        <button onclick="appendToDisplay('0')">0</button>
        <button onclick="appendToDisplay('.')">.</button>
        <button onclick="calculate()" class="option">=</button>
        <button onclick="operate('/')" class="option">÷</button>
        <button onclick="clearDisplay()" class="option">C</button>
      </div>
    </div>
    <script src="js/calculartor.js"></script>
  </body>
</html>