JavaScript实现一个计算器

最新推荐文章于 2025-06-17 12:24:11 发布

Z5uo

最新推荐文章于 2025-06-17 12:24:11 发布

阅读量5.3k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签：计算器原型链 freeCodeCamp 原生JS 闭包

本文链接：https://blog.youkuaiyun.com/Char_n/article/details/81353508

这篇博客介绍了如何使用JavaScript为freeCodeCamp创建一个计算器。文章涵盖了HTML、CSS和JS代码，重点在于JS部分，利用闭包和工厂模式实现功能。HTML用于构建计算器界面，CSS增加视觉效果，JS代码处理计算器的运算逻辑。

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

FCC-JavaScript写一个计算器

Happy coding.
废话不多说直接上代码。

FCC-JavaScript写一个计算器

效果：传送门

HTML代码

html代码并没有什么好讲的；其中比较重要的点就是根据每个button的name中的值来区别一些特别的操作，比如平方、开根号等等，然后为了更好的用户体验，在每个button用一个a标签包裹，设置title属性，用来提醒该button是什么操作。

<div class="calculator">
    <h1>Zhuo Calculator</h1>
    <div class="prev-result" id="prev-result"></div>
    <div class="result" id="result">0</div>
    <div class="buttons">
      <a title="左括号">
        <button class="button" value="(" name="normal">(</button>
      </a>
      <a title="右括号">
        <button class="button" value=")" name="normal">)</button>
      </a>
      <a title="平方">
        <button class="button" value="sqr" name="special">²</button>
      </a>
      <a title="开根号">
        <button class="button" value="sqrt" name="special">√￣</button>
      </a>
      <button class="button" value=" " name="special">&nbsp;</button>
    </div>
    <div class="buttons">
      <a title="非运算">
        <button class="button" value="~" name="normal">~</button>
      </a>
      <a title="或运算">
        <button class="button" value="|" name="normal">|</button>
      </a>
      <a title="与运算">
        <button class="button" value="&" name="normal">&</button>
      </a>
      <a title="左移运算">
        <button class="button" value="<<" name="normal">&lt;&lt;</button>
      </a>
      <a title="右移运算">
        <button class="button" value=">>" name="normal">&gt;&gt;</button>
      </a>
    </div>
    <div class="buttons">
      <a title="返回上一步">
        <button class="button danger" value="AC" name="special">←</button>
      </a>
      <a title="全部清除">
        <button class="button" value="CE" name="special">CE</button>
      </a>
      <a title="乘号">
        <button class="button" value="*" name="normal">×</button>
      </a>
      <a title="除号">
        <button class="button" value="/" name="normal">÷</button>
      </a>
      <a title="将输入的十进制转换成十六进制数">
        <button class="button" value="16" name="special">Hex</button>
      </a>
    </div>
    <div class="buttons">
      <button class="button" value="7" name="normal">7</button