本文使用js实现了一个简单的加、减、乘、除计算器。

以下是css部分代码:

*{
    padding:0;
    margin:0;
    color: #424242;
}

.outer{
    width:300px;
    height:auto;
    outline:1px solid #b9b9b9;
    margin:50px auto;
    background: pink;
}

.title{
    height:40px;
    width:100%;
    border-bottom:1px solid #b9b9b9;
    text-align: left;
    text-indent:10px;
    line-height: 40px;
    cursor: pointer;
}

.bodyBox{
    width:90%;
    height:auto;
    padding:5%;
}

.calView{
    width:100%;
    height:75px;
    outline:1px solid #b9b9b9;
    background: rgba(255,255,255,.8);
    overflow: scroll;
    text-indent: 5px;
    padding-top:5px;
}

.content,
.contentBtn{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.btn{
    display: inline;
    width:22%;
    height:30px;
    margin-top:15px;
    text-align: center;
    line-height:30px;
    outline:1px solid #b9b9b9;
    cursor: pointer;
}

.back,
.reset{
    display: inline;
    width:47%;
    height:30px;
    margin-top:15px;
    text-align: center;
    line-height:30px;
    outline:1px solid #b9b9b9;
    cursor: pointer;
}

以下是html部分代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
    <link rel="stylesheet" href="calculator.css">
</head>
<body>
    <div class="outer">
        <div class="title">
            <span>计算器</span>
        </div>
        <div class="bodyBox">
            <div class="calView"></div>
            <div class="content">
                <span class="btn">7</span>
                <span class="btn">8</span>
                <span class="btn">9</span>
                <span class="btn">+</span>
                <span class="btn">4</span>
                <span class="btn">5</span>
                <span class="btn">6</span>
                <span class="btn">-</span>
                <span class="btn">1</span>
                <span class="btn">2</span>
                <span class="btn">3</span>
                <span class="btn">*</span>
                <span class="btn">0</span>
                <span class="btn">.</span>
                <span class="btn">=</span>
                <span class="btn">/</span>
            </div>
            <div class="contentBtn">
                <span class="back">回退</span>
                <span class="reset">清空</span>
            </div>
        </div>
    </div>
<script src="calculator.js"></script>
</body>
</html>

以下是js部分代码(使用了es6的语法,使用之前请将编辑器设置为支持es6语法):

/**
 * Created by Administrator on 2018/10/1.
 */
(function(){
    let content=document.getElementsByClassName("content")[0];
    let calView=document.getElementsByClassName("calView")[0];
    let reset=document.getElementsByClassName("reset")[0];//清空按钮
    let back=document.getElementsByClassName("back")[0];//回退按钮
    let arr=[];//存放输入的内容
    content.onclick=function(event){
        e=window.event||arguments[0];
        let tar=e.target;
        let val=tar.innerText;
        if(calView.innerHTML.indexOf("=")!==-1){//如果已经计算出结果,则开始下一次计算,清空数组
            calView.innerHTML="";
            arr=[];
        }
        calView.innerHTML="";
        arr.push(val);//将输入内容放入数组
        if(!isNaN(parseFloat(val))){//如果输入数字,则进行拼接
            joinNum(val);
        }
        if(isNaN(parseFloat(arr[arr.length-2])) && isNaN(parseFloat(arr[arr.length-1]))){//如果上一位和这一位为符号,则删除这一位
            arr.pop();
        }
        show();//更新窗口内容
        if(val==="=" && arr.length>1){//如果输入等号,则计算出结果
            compute(arr);
        }
    };
    reset.onclick=()=>{//清空输入的内容
        calView.innerHTML="";
        arr=[];//清空数组
    };
    back.onclick=()=>{//清空输入的内容
        arr.pop();
        show();
    };

    /**
     * 拼接输入的内容
     * @param val :用户输入的内容
     */
    function joinNum(val){
        if(!isNaN(parseFloat(arr[arr.length-2]))){//检测上一个是否为数字
            arr[arr.length-2]=String(parseFloat(arr[arr.length-2])*10+parseFloat(val));
            arr.pop();
        }
        if(arr[arr.length-2] === "/" && arr[arr.length-1] ==="0"){//如果分母为0,则删除0
            arr.pop();
        }
    }

    /**
     * 更新显示窗口内容
     */
    function show(){
        let arrLen=arr.length;
        let str="";
        for(let i=0;i<arrLen;i++){
            str+=arr[i];
        }
        calView.innerHTML=str;//将拼接好的字符串显示在结果窗口中
        return str;
    }

    /**
     * 计算出最终结果
     */
    function compute(arr){
        let showStr=show();
        calView.innerHTML=showStr + eval(showStr.split("=")[0]).toFixed(6);//由于会出现精度丢失问题,因此这里用toFixed()处理一下
    }

})();

最终效果如下图所示,样式我写得比较随意,将就看吧!

用JavaScript写一个简单的计算器-LMLPHP

(本文为原创,转载请注明,谢谢!如果发现bug,请大家提出来!)

10-02 11:43