【蓝桥杯web】2022年第十三届web大学组国赛：用什么来做计算 A(真题解析)

本文链接：https://blog.youkuaiyun.com/weixin_52368011/article/details/130935889

文章描述了一个计算器应用的问题，其中加减乘除等运算按钮无响应且无法显示计算结果。目标是修复js/index.js文件，使计算器能正常处理加减乘除、开平方、重置和小数点等功能，遵循四则运算规则，并能显示计算过程和结果。

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

题目介绍：

古以算盘作为计算工具。算盘常为木制矩框，内嵌珠子数串，定位拨珠，可做加减乘除等运算。站在前人的肩膀上，后人研究出计算器，便利了大家的生活，我们不用带着笨重的计算工具出门，打开手机上的计算器就可以了。

题目要求：

本题需要实现一个可以进行加减乘除等运算的计算器。

准备：

开始答题前，需要先打开本题的项目文件夹，目录结构如下：

├── css
│   └── style.css
├── js
│   └── index.js
├── effect.gif
└── index.html

其中：

css/style.css 是样式文件。
js/index.js 是实现计算功能的 js 文件。
effect.gif 是最终实现的效果动图。
index.html 是主页面。

运行项目如下所示：

当前出现的问题是：

点击操作按钮没有反应。
屏幕显示区域无显示。
计算器无法正常计算。

目标：

请完善 js/index.js 文件，当鼠标点击计算器上的按钮时，能够正常进行计算。

点击按钮会在计算式子区域显示当前输入的计算式子，当点击等号（=） 后，在结果显示区域应该显示出正确的结果。
计算器需要具有加（+）、减（-）、乘（x）、除（÷）、开二次方（√）、重置（AC）、小数点（.）、括号运算这八个功能。
计算器的计算遵循四则混合运算的法则，括号的优先级最高，其次是乘除，加减的优先级最低。

效果说明：

能够正确进行加、减、乘、除的混合运算
能够正确进行开二次方，输入一个可以平方的数，点击开方（√）按钮即可在结果显示区域显示结果。如果输入的值是不能平方，结果显示 NaN
点击重置按钮（AC），可以清空计算式子显示区域和结果显示区域的值。
能够进行小数的加减乘除运算

解题思路：

用一个字符串来存储整个算式，每次点击计算器的按钮(div)，依次添加这个按钮(div)内对应的value值连接到equation字符串中，后再对这个算式(equation字符串)进行字符串替换( "x" 替换为 "*" , "÷" 替换为 "/" ),再使用eval方法进行计算算式，得出的结果显示到 id为"result" 的输入框中。

*注意：

对“AC”进行清空input内容的操作
对“=”进行输出result结果的操作
对“√”进行开根操作（ Math.sqrt() 方法）

JScript代码如下：

// TODO：请补充代码   
var equation=''   //存储完整算式（字符串形式）
var result=''     //计算结果
document.querySelectorAll(".calc-button").forEach(item=>{
    item.onclick=function(){
        if(this.textContent=='AC')
        {
            equation=''
            result=''
            document.getElementById("formula").value=equation
            document.getElementById("result").value=result
            return 
        }
        if(this.textContent=='=')
        {
            let newEquation=''
            newEquation=equation.replace("x","*").replace("÷","/")   //字符串替换（"x"替换为"*","÷"替换为"/"）
            result=eval(newEquation)         //字符串转化为算式
            document.getElementById("result").value=result
            return
        }
        if(this.textContent=='√')
        {
            result=Math.sqrt(eval(equation))  //计算开根
            document.getElementById("result").value=result
            return
        }
        
        equation+=this.textContent           //拼接算式（字符串）
        document.getElementById("formula").value=equation
    }
})

成功完成！！

如有不合理的地方，欢迎各位大牛提出指正！

笔芯ღ( ´･ᴗ･` )