HTML+JavaScript小练习之简易计算器

计算器应该是所有图形化程序开发学习中最适合上手的一个小项目了，之前学习Java Swing和Android的时候也是从开发计算器开始做起，这一次使用HTML和JavaScript开发一个功能简单的web计算器吧?

首先确定计算器的功能应该包括：输入、逐个删除、清空所有、显示结果四个部分。

①输入

基本组件为

为其绑定一个inputExp(symbol) 函数，函数功能是将传入的symbol值添加到表达式框中，比如按钮“7”,入口参数就为7。

 

  /*将按钮对应的符号组合成表达式*/
        function inputExp(symbol) {
            ele = document.getElementById("expression");
            ele.value += symbol;
        }

②逐个删除

类似于电脑上Backspace的功能按钮，点击则删除表达式 最后一位字符。

使用String类中封装的slice()函数完成backspace的功能，获得expression框中的String型表达式的length后-1作为截取终点，再将截取下来的新字符串赋给expression框的value即可实现删除末位字符的功能。

        /*逐个删除*/
        function deleteSymbol() {
            ele = document.getElementById("expression");
            var exp = ele.value;
            var end = exp.length - 1;
            exp = ele.value.slice(0, end);
            ele.value = exp;
        }

③清空所有

点击清空expression框和result框

先后通过document.getElementById()获取组件，再将其value赋值为空字符串即可

    /*清空所有内容*/
        function clearAll() {
            ele = document.getElementById("expression");
            ele.value = "";
            ele = document.getElementById("result")
            ele.value = "";
        }

④显示结果

点击将expression框中的表达式计算，并将结果显示在result框中

这里JavaScript提供了非常简便的eval()函数，直接将expression框中的String型表达式作为eval()的入口参数即可计算出结果

     /*计算出结果*/
        function giveResult() {
            ele = document.getElementById("expression");
            resultOfExp = eval(ele.value);
            ele = document.getElementById("result");
            ele.value = resultOfExp;
        }

 

完整版代码

完成效果：https://calculatorofxm.netlify.com/

总结：计算器程序难度不高，但对于初学阶段而言还是会遇到不少意想不到问题，比如我在为清空按钮绑定事件时候οnclick="clear()"死活就是出不来想要的效果，最后发现clear是JS的保留字之一，改成clearAll之后就顺理运行了。所以还是不能眼高手低，自己动手开发一遍为好。