用HTML,JS,CSS设计一个简单(包含加、减、乘、除功能)的计算器_用html,js,css设计一个简单(包含加、减、乘、除,%功能)的计算器-CSDN博客

本文链接：https://blog.csdn.net/qq_43717065/article/details/107746189

用HTML,JS,CSS设计一个简单(包含加、减、乘、除功能)的计算器

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器设计</title>
    <link rel="stylesheet" type="text/css" href="CSS/index.css" />
</head>
<body>
<div id="main">
        <div id="input_text">
            <input type="text" id="content">
        </div>
        <div id="input_button">
            <input type="button" class="same_size" value="1">
            <input type="button" class="same_size" value="2">
            <input type="button" class="same_size" value="3">
            <input type="button" class="same_size" value="Back">
            <input type="button" class="same_size" value="C">
            <input type="button" class="same_size" value="4">
            <input type="button" class="same_size" value="5">
            <input type="button" class="same_size" value="6">
            <input type="button" class="same_size" value="+">
            <input type="button" class="same_size" value="-">
            <input type="button" class="same_size" value="7">
            <input type="button" class="same_size" value="8">
            <input type="button" class="same_size" value="9">
            <input type="button" class="same_size" value="*">
            <input type="button" class="same_size" value="/">
            <input type="button" class="same_size" value="附加">
            <input type="button" class="same_size" value="0">
            <input type="button" class="same_size" value=".">
            <input type="button" class="equal_size" value="=">
        </div>
</div>
</body>
<script type="text/javascript" src="js/index.js"></script>
</html>

JS代码：

var b1 = document.getElementById("content");
var b2 = document.getElementById("input_button");
b2.addEventListener("click", btn_click)
function btn_click(e) {
    //清空b1.value
    if (b1.value.indexOf("=") > -1 || b1.value=="ERROR!" || b1.value=="该功能未开放！")
        b1.value="";
    //输入"="号的时候计算结果
    if (e.target.value=="="){
        // var ans=eval(b1.value); //可以直接使用eval(string)来计算结果，string为输入的等式字符串
        var arr=b1.value.split(" ");
        var ans=[];
        var i=0;
        while (i<arr.length){
            if (arr[i]=="")
                i++;
            else if (arr[i]=="+"){
                ans.push(arr[i+1]);
                i+=2;
            }
            else if (arr[i]=="-"){
                ans.push(-arr[i+1]);
                i+=2;
            }
            else if (arr[i]=="*"){
                var a;
                var b=ans.pop();
                if(arr[i+1]=="-"){
                    a=-arr[i+2];
                    i+=3;
                }
                else {
                    a=arr[i+1];
                    i+=2;
                }
                // console.log("a,b:",a,b)
                ans.push(b*a);
            }
            else if (arr[i]=="/"){
                var a;
                var b=ans.pop();
                if (arr[i+1]=="0"){
                    b1.value="ERROR!";
                    return;
                }
                else if(arr[i+1]=="-"){
                    a=-arr[i+2];
                    i+=3;
                }
                else {
                    a=arr[i+1];
                    i+=2;
                }
                ans.push(b/a);
            }
            else {
                ans.push(arr[i]);
                i++;
            }

        }
        // console.log(ans);
        var fin_ans=parseFloat(ans[0]);
        for (i=1;i<ans.length;i++)
            fin_ans+=parseFloat(ans[i]);
        s=" "+e.target.value +" "+fin_ans;
        b1.value+=s;
    }
    //输入"+"号时加入b1.value字符串
    else if(e.target.value=="+"){
        s=" "+e.target.value +" ";
        b1.value+=s;
    }
    //输入"-"号时加入b1.value字符串
    else if(e.target.value=="-"){
        s=" "+e.target.value +" ";
        b1.value+=s;
    }
    //输入"*"号时加入b1.value字符串
    else if(e.target.value=="*"){
        s=" "+e.target.value +" ";
        b1.value+=s;
    }
    //输入"/"号时加入b1.value字符串
    else if(e.target.value=="/"){
        s=" "+e.target.value +" ";
        b1.value+=s;
    }
    //输入"Back"时回退一步
    else if(e.target.value=="Back"){
        if(b1.value[b1.value.length-1]==" " && b1.value[b1.value.length-3]==" ")
            b1.value=b1.value.slice(0,b1.value.length-3);
        else
            b1.value=b1.value.slice(0,b1.value.length-1);
    }
    //输入"附加",该功能未开放
    else if (e.target.value=="附加"){
        b1.value="该功能未开放！";
    }
    //输入"C"时清空b1.value
    else if(e.target.value=="C"){
        b1.value="";
    }
    //鼠标点到其他空白地方时b1.value不变
    else if (e.target.value==undefined){
        b1.value=b1.value;
    }
    //输入数字时加入b1.value字符串
    else{
        b1.value+=e.target.value;
    }
}

CSS代码：

#main{
    border: 1px solid black;
    margin: 1vw auto;
    width: 45vw;
    height: 30vw;
}

#input_text{
    /*border: 1px solid red;*/
    margin: 3% 4%;
    width: 92%;
    height: 14%;
    display: flex;
}
 #input_button{
     /*border: 1px solid black;*/
     margin: 3% 2%;
     width: 96%;
     height: 74%;
     display: flex;
     flex-wrap: wrap;
}

#input_text #content{
    flex: auto;
    margin: 0;
    width: 100%;
    /*height: 65%;*/
    font-size: 2vw;
}
#input_button .same_size{
    flex: auto;
    margin: 1%;
    width: 18%;
    height: 20%;
    font-size: 1.5vw;
}
#input_button .equal_size{
    flex: auto;
    margin: 1%;
    width: 38%;
    height: 20%;
    font-size: 1.5vw;
}