HTML+CSS+JS实现简单计算器

      本文运用前端代码实现一个简单的计算器界面，并通过JS实现了基本的运算功能。（加、减、乘、除、清屏/退格、取余、取倒）

1.编写前端界面

    
    
    


    

        

                查看（V）
                编辑（E）
                帮助（H）
        
        

            
        

        

            

                

                    

                        MCMRMSM+M-

                        BKCEC()

                        789*/

                        456%1/x

                    
                   

                        123-

                        0.+
                    
                    

                        =
                    
                

            
        
        


        
    

 界面如下：

2.通过JS实现计算器功能

• 在需要实现功能的地方添加相应的函数点击事件

                        BKCEC()

                        789*/

                        456%1/x

                        123-
                        0.+
                        =

•  对函数进行初始化

•  实现输入框的输入（数字、小数点、运算符、括号）

•  等于号的实现

function equal() {
        var cin = document.getElementById("cin");
        var val = cin.value;
        var res = eval(val);
        cin.value = res;
    }

•  清屏C 、退格BK、错误回退CE的实现

 function clear1() {
        var cin = document.getElementById("cin");
        cin.value = "";
        // if(cin.value.length>0){
        //     document.getElementById("cin").value = "";
        // }
    }
    function back1() {
        var cin = document.getElementById("cin");
        cin.value = cin.value.substr(0,cin.value.length -1);
    }
    function clearerr() {
        var cin = document.getElementById("cin");
        var val = cin.value;
        var index = val.lastIndexOf("-");
        if(index===-1){
            index = val.lastIndexOf("+");
        }
        if(index===-1){
            index = val.lastIndexOf("*");
        }
        if(index===-1){
            index = val.lastIndexOf("/");
        }
        if(index!==-1){
            val = val.substring(0,index+1);
        }

        cin.value = val;
    }

•  倒数的实现

function reciprocal() {
        var cin = document.getElementById("cin");
        var rst = 1/cin.value;
        cin.value = rst;
    }

目前 查看、编辑、帮助以及按钮的首行功能还未实现，可自行添加。