JS实现计算器（一）_calculator.js-CSDN博客

本文链接：https://blog.csdn.net/qq_44140870/article/details/116062324

本文介绍了如何使用JavaScript实现一个基本的四则运算计算器。通过将中缀表达式转换为后缀表达式，实现了计算器的运算逻辑。HTML和CSS用于构建用户界面，JavaScript处理点击事件并计算结果。代码简洁明了，易于理解，虽然第一版不包含括号、平方和历史记录功能，但为后续扩展打下了基础。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS实现简单计算器（一）

写个四则运算的函数很简单，实现一个计算器的页面真是累死个人。。。

能够进行简单的四则运算，效果基本与win10自带计算器相同。
第一版没有括号，平方，存储历史记录等功能，后续添加。。。
截图如下
在这里插入图片描述
思路：主要是将输入的运算式，中缀改后缀，然后运算得出结果。不过植入页面，会有输入输出各方面的一些小问题，导致代码变多了不少。

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Calculator</title>
  <link rel="stylesheet" href="./index.css">
</head>
<body>
  <h2>计算器1.0</h2>
  <div class="calc-wrap">
    <div class="calc-in-out">
      <!-- 上一条运算记录 -->
      <p class="calc-history" title=""></p>
      <!-- 运算等式 -->
      <p class="calc-in"></p>
      <!-- 输入的数字和输出的运算结果 -->
      <p class="calc-out active">0</p>
    </div>
    <table class="calc-operation">
      <thead></thead>
      <tbody>
        <tr>
          <td data-ac="cls" class="cls">C</td>
          <td data-ac="del">&larr;</td>
          <td data-ac="sq">x<sup>2</sup></td>
          <td data-ac="*">&times;</td>
        </tr>
        <tr>
          <td data-val="7">7<