计算器_odiv.style.left和clientx计算方法-CSDN博客

本文链接：https://blog.csdn.net/yzp3055506633/article/details/78113985

用前端实现计算器

**原理**：利用中缀表达式转换后缀表达式来实现运算符的优先级
我这里就不啰嗦了,嘿嘿，大家很容易理解的,有兴趣可以去百度

**作用**: 正常的计算器功能，主要是加了挂号功能,嗯然后有个
记录功能来记录你计算的结果，右边的记录框里面的内容可拖动....

**心得**:js代码写的有点乱,自己都看不下去......没办法刚开始
接触js,不太习惯,我会尽量去注释....

效果:
这里写图片描述

这里写图片描述

页面代码：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        .body{
            background-color: #999999;
        }
        #result{
            width: 350px;
            height: 300px;
            background-color: #F1F3F2;
            margin: auto;
            margin-top: 10px;
            overflow: hidden;
        }
        #caltextone,#caltexttwo{
            width: 350px;
            height:100px;
            font-size: 40px;
            text-align: right;
            line-height: 100px;
            overflow: hidden;
        }
        #relt{
            width: 340px;
            height:100px;
            font-size: 40px;
            text-align: right;
            line-height: 100px;
            overflow: hidden;
        }
        #coontent{
            width: 352px;
            height: 360px;
            background-color: #FAFBFD;
            margin: auto;
            box-sizing: border-box;

        }
        #coontent tr td{
            width: 88px;
            height:60px;
            border: 1px solid rgba(153, 153, 153, 0.22);
            text-align: center;
            line-height: 60px;
            font-size: 24px;
            font-family: "Arial Black";
            cursor: default;
        }
        #ac{
            color: #FB772F;
        }
        #sum{
            background-color: #FB772F;
        }
        #histiory,#closehistory{
            width: 100px;
            height:50px;

        }
        #histiory span{
            font-size: 24px;
            text-align: center;
            line-height: 50px;
        }
        #closehistory span{
            font-size: 24px;
            text-align: center;
            line-height: 50px;
        }
        #histiory{
            position: relative;
            top:-600px;
            left: 50px;
        }
        #closehistory{
            position: relative;
            top:-650px;
            left: 250px;
        }
        #histiory,#closehistory:hover{
            cursor: pointer;
        }
        #histiory span:hover{
              color: seagreen;
          }
        #closehistory span:hover{
            color: seagreen;
        }
        #writehis{
            width: 350px;
            height: 670px;
            background-color: #F1F3F2;
            position: absolute;
            right: 80px;
            top:10px;
            overflow: hidden;
            display: none;
        }
        #writehishow:hover{
            cursor: move;
        }
        #writehishow{
            width: 100%;
            list-style: none;
            font-size: 24px;
            text-align: right;
            position: absolute;
        }
        #writehisshow li{
            width: 100%;
            height: 30px;
            line-height: 30px;
        }
    </style>
    <script type="text/javascript" src="controlcalcu.js"></script>
</head>
<body class="body">
<div id="result">
    <p id="caltexttwo"></p>
    <p id="caltextone"></p>
    <p id="relt"></p>
</div>
<table id="coontent" cellpadding="0" cellspacing="0">
    <tr>
        <td  id="left">(</td>
        <td colspan="2">月月鸟</td>
        <td  id="right">)</td>
    </tr>
    <tr>
        <td id="ac">AC</td>
        <td id="fm">FM</td>
        <td id="divied">/</td>
        <td id="seq">*</td>
    </tr>
    <tr>
        <td id="seven">7</td>
        <td id="eight">8</td>
        <td id="nine">9</td>
        <td id="sub">-</td>
    </tr><tr>
        <td id="four">4</td>
        <td id="five">5</td>
        <td id="six">6</td>
        <td id="add">+</td>
    </tr><tr>
        <td id="one">1</td>
        <td id="two">2</td>
        <td id="three">3</td>
        <td id="sum" rowspan="2">=</td>
    </tr><tr>
        <td id="hud">%</td>
        <td id="zero">0</td>
        <td id="point">.</td>
</tr>
</table>
<div id="histiory"><span>历史记录</span></a></div>
<div id="closehistory"><span>清除记录</span></div>
<div id="writehis">
    <ul id="writehishow">
        <li>历史记录</li>
        <li></li>
    </ul>
</div>
</body>
</html>

js代码：

var caltext=[];
var calreplace=[];
var c=["","+","*","("];
var c1=[")","-","/"];
var stack1=[];
var stack2=[];
var stack3=[];
var stack4=[];
var flag=true;
window.onload=function () {
    var content = document.getElementById("coontent");
    var openhistory = document.getElementById("histiory");
    var closehistory = document.getElementById("closehistory");
     //控制打开记录的监听事件
    openhistory.onclick=function () {
        if(flag){
            var elementById = document.getElementById("writehis");
            elementById.style.display="block";
            flag=false;
        }else {
            var elementById = document.getElementById("writehis");
            elementById.style.display="none";
            flag=true;
        }
    }
    //清除记录的监听事件
    closehistory.onclick=function () {
        var elementById2 = document.getElementById("writehishow");
        var children = elementById2.children;
        console.log(children.length)
        while (children.length>1){
            elementById2.removeChild(children[children.length-1]);
        }
    }
    var oDiv = document.getElementById("writehishow");
     //实现记录拖动的效果
    oDiv.onmousedown=function(ev)
    {
        var oEvent = ev;
        var disX = oEvent.clientX - oDiv.offsetLeft;
        var disY = oEvent.clientY - oDiv.offsetTop;
        document.onmousemove=function (ev)
        {
            oEvent = ev;
            oDiv.style.left = oEvent.clientX -disX+"px";
            oDiv.style.top = oEvent.clientY -disY+"px";
        }
        document.onmouseup=function()
        {
            document.onmousemove=null;
            document.onmouseup=null;
        }
    }

     //给各个按钮创建监听事件
    content.addEventListener("click",function (Event) {
        var target = Event.target;
        switch (target.id){
            case "ac":
                changeac();
                break;
            case "fm":
                subtext();
                break;
            case "left":
                addtext(target.innerHTML);
                break;
            case "right":
                addtext(target.innerHTML);
                break;
            case "divied":
                addtext(target.innerHTML);
                break;
            case "seq":
                addtext(target.innerHTML);
                break;
            case "sub":
                addtext(target.innerHTML);
                break;
            case "add":
                addtext(target.innerHTML);
                break;
            case "sum":
                addtext(target.innerHTML);
                caltext.pop();
                changecaltext();
                istrue();
                playcal();
                writehistory();
                break;
            case "point":
                addtext(target.innerHTML);
                break;
            case "one":
                addtext(target.innerHTML);
                break;
            case "two":
                addtext(target.innerHTML);
                break;
            case "three":
                addtext(target.innerHTML);
                break;
            case "four":
                addtext(target.innerHTML);
                break;
            case "five":
                addtext(target.innerHTML);
                break;
            case "six":
                addtext(target.innerHTML);
                break;
            case "seven":
                addtext(target.innerHTML);
                break;
            case "eight":
                addtext(target.innerHTML);
                break;
            case "nine":
                addtext(target.innerHTML);
                break;
            case "zero":
                addtext(target.innerHTML);
                break;
        }
    })
}
 //给输入框添加内容
function addtext(string) {
    if(caltext.length<=12){
        var elementById3 = document.getElementById("caltexttwo");
        elementById3.innerHTML="";
    }
    var elementById = document.getElementById("relt");
    elementById.innerHTML="";
    if(string=="/"||string=="*"||string=="-"||string=="+"){
        if(caltext[caltext.length-1]=="/"||caltext[caltext.length-1]=="*"||caltext[caltext.length-1]=="+"||caltext[caltext.length-1]=="-"){
            alert("非法输入.....");
            string=caltext[caltext.length-1];
            caltext.pop();
        }
    }
   caltext[caltext.length]=string;
    var length = caltext.length;
       if(length<=12){
           var elementById = document.getElementById("caltextone");
           var s="";
           for(var i=0; i<length; i++){
               s+=caltext[i];
           }
           elementById.innerText=s;
       }else {
           var s1="";
           var s2="";
           var elementById = document.getElementById("caltextone");
           var elementById2 = document.getElementById("caltexttwo");
           for(var l=length-12;l<length;l++){
               s1+=caltext[l];
           }
           for(var j=0;j<length-12;j++){
               s2+=caltext[j];
           }
           elementById2.innerText=s2;
           elementById.innerText=s1;

       }
}
function subtext() {
    var elementById = document.getElementById("relt");
    elementById.innerHTML="";
    caltext.pop();
    var length = caltext.length;
    if(length<=12){
        var elementById = document.getElementById("caltextone");
        var s="";
        for(var i=0; i<length; i++){
            s+=caltext[i];
        }
        elementById.innerText=s;
    }else {
        var s1="";
        var s2="";
        var elementById = document.getElementById("caltextone");
        var elementById2 = document.getElementById("caltexttwo");
        for(var l=length-12;l<length;l++){
            s1+=caltext[l];
        }
        for(var j=0;j<length-12;j++){
            s2+=caltext[j];
        }
        elementById2.innerText=s2;
        elementById.innerText=s1;

    }

}
 //实现AC功能清除之前的输入
function changeac() {
    caltext.splice(0,caltext.length);
    var elementById = document.getElementById("relt");
    elementById.innerHTML="";
    var elementById = document.getElementById("caltextone");
    var elementById2 = document.getElementById("caltexttwo");
    elementById2.innerText="";
    elementById.innerText="";
}

 //计算结果
function playcal() {
    for(var p=0; p<calreplace.length; p++){

        if(calreplace[p]=="/"||calreplace[p]=="*"||calreplace[p]=="+"||calreplace[p]=="-"||calreplace[p]=="("||calreplace[p]==")"){
            if(stack1.length==0){
                stack1[stack1.length]=calreplace[p];
            }else {
                if(getnum(calreplace[p])-getnum(stack1[stack1.length-1])>0){
                    stack1[stack1.length]=calreplace[p];
                }else {
                    while(true){
                        if(getnum(calreplace[p])-getnum(stack1[stack1.length-1])<=0){
                            if(getnum(stack1[stack1.length-1])-getnum(calreplace[p])==3){
                                stack1.pop();
                                break;
                            }else if(stack1[stack1.length-1]=="("){
                                stack1[stack1.length]=calreplace[p];
                                break;
                            }else {
                                stack2[stack2.length]=stack1.pop();
                            }

                        }
                        if(stack1.length==0){
                            stack1[stack1.length]=calreplace[p];
                            break;
                        }

                        if(getnum(calreplace[p])-getnum(stack1[stack1.length-1])>0){
                            stack1[stack1.length]=calreplace[p];
                            break;
                        }
                    }
                }
            }
        }else {
            stack2[stack2.length]=calreplace[p];
        }
    }
    if(stack1.length>0){
        while (stack1.length>0){
            stack2[stack2.length]=stack1.pop();
        }
    }
    while (stack2.length>0){
        var c = stack2.shift();
        if(c=="+"||c=="*"||c=="-"||c=="/"){
            var a = stack3.pop();
            var b = stack3.pop();
            stack3[stack3.length]=calcu(b,a,c);
        }else if(c=="(" || c==")"){

        }
        else {
            stack3[stack3.length]=c;
        }
    }
    var elementById = document.getElementById("relt");
    elementById.innerHTML=stack3.pop();

    caltext.splice(0,caltext.length);
    stack1.splice(0,caltext.length);
    stack2.splice(0,caltext.length);
    stack3.splice(0,caltext.length);
    calreplace.splice(0,calreplace.length);
}

 //对输入内容进行处理 输入的内容是 2,2,+,2,2 转换成22,+,22
function changecaltext() {
    var ss="";
    for (var i = 0,k=0; i < caltext.length;) {
        if (caltext[i] == "+" || caltext[i] == "-" || caltext[i] == "*" || caltext[i] == "/"|| caltext[i] == "("|| caltext[i] == ")") {
            calreplace[k] = caltext[i];
            k++;
            i++;
        } else {
            while (!(caltext[i] == "+" || caltext[i] == "-" || caltext[i] == "*" || caltext[i] == "/"|| caltext[i] == "("|| caltext[i] == ")")) {
                ss += caltext[i];
                i++;
                if (i == caltext.length)
                    break;
            }
            calreplace[k] = ss;
            ss = "";
            k++;
        }
    }
}
 //判断符号的优先级
function getnum(string) {
    for(var a=0; a<c.length; a++){
        if(string==c[a]){
            return a;
        }
    }
    for(var a=0; a<c1.length; a++){
        if(string==c1[a]){
            return a;
        }
    }
}
 //进行计算
function calcu(a,b,c) {
    var sum = 0.0;
    switch (c) {
        case "+":
            sum = a*1 + b*1;
            break;
        case "-":
            sum = a - b;
            break;
        case "/":
            sum = a / b;
            break;
        case "*":
            sum = a * b;
            break;
    }
    return sum;
}
 //判断输入的挂号是否成对匹配
function istrue() {
    var left=0;
    var right=0;
    for(var i=0; i<calreplace.length;i++){
        if(calreplace[i]=="("){
            left++;
        }
        if(calreplace[i]==")"){
            right++;
        }
    }
    if(!(right==left)){
        alert("输入有误...挂号少了..答案可能有误..");
    }
}

 //增加历史记录
function writehistory() {
    var element = document.createElement("li");
    var elementById = document.getElementById("writehishow");
    var elementById1 = document.getElementById("caltexttwo");
    var elementById2 = document.getElementById("caltextone");
    var elementById3 = document.getElementById("relt");
    var s=elementById1.innerHTML+elementById2.innerHTML+elementById3.innerHTML;
    element.innerHTML=s;
    elementById.appendChild(element);
}