js实现简易的计算器

最新推荐文章于 2023-09-18 09:54:05 发布

Fingertipy

最新推荐文章于 2023-09-18 09:54:05 发布

阅读量587

点赞数

分类专栏： javascript 前端开发 js 文章标签： js实现简易的计算器

本文链接：https://blog.csdn.net/Fingertipy/article/details/68946951

版权

javascript 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

前端开发

1 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
<style type="text/css">
    .contain{
        overflow: hidden;
        width: 200px;
        margin: 0 auto;
        padding: 10px;
        background: #d9f4f1;
        border-radius: 4px;
    }
    #txt{
        display: block;
        width: 99%;
        margin-bottom: 5px;
        height: 50px;
        border: 1px solid #889aad;
        border-radius: 4px;
        color: #1f3961;
        background:rgb(217,228,241);
        resize: none;
        letter-spacing: 2px;
        word-break:break-all;
        word-wrap:break-word;
    }
    input{
        float: left;
        width: 30%;
        margin-right:5%;
        margin-bottom: 10px;
        display: block;
        height: 30px;
        border: 1px solid #889aad;
        border-radius: 4px;
        color: #1f3961;
        background:rgb(217,228,241);
        line-height: 30px;
    }
    input:hover{
        background: #ffd271;
        box-shadow: 0 0 1px 1px #ffd271;
    }
    input:nth-child(3n){
        margin: 0;
    }
</style>
<div class="contain">
    <textarea id="txt" readonly="readonly"></textarea>
    <div class="button">
        <input type="button" value="C"/>
        <input type="button" value="+"/>
        <input type="button" value="-"/>
        <input type="button" value="<-"/>
        <input type="button" value="*"/>
        <input type="button" value="/"/>
        <input type="button" value="1"/>
        <input type="button" value="2"/>
        <input type="button" value="3"/>
        <input type="button" value="4"/>
        <input type="button" value="5"/>
        <input type="button" value="6"/>
        <input type="button" value="7"/>
        <input type="button" value="8"/>
        <input type="button" value="9"/>
        <input type="button" value="0"/>
        <input type="button" value="."/>
        <input type="button" value="="/>
    </div>
</div>
</body>
<script type="text/javascript">
    var operatin = {
        addition : function(val1,val2){  //加法
                    var v1,v2,m;
                    try {v1 = val1.toString().split(".")[1].length;}catch(e){v1=0};
                    try {v2 = val1.toString().split(".")[1].length;}catch(e){v2=0};
                    m = Math.pow(10,Math.max(v1,v2));
                    return (val1*m+val2*m)/m;
                },
        ride :  function(val1,val2){ //乘法
                    var m= 0,v1=val1.toString(),v2=val2.toString();
                    try {m+= v1.split(".")[1].length;}catch(e){};
                    try {m+= v2.split(".")[1].length;}catch(e){};
                    return Number(v1.replace(".",""))*Number(v2.replace(".",""))/Math.pow(10,m);
                },
        division : function(val1,val2){  //除法
                    var n1= 0,n2= 0,v1=val1.toString(),v2=val2.toString();
                    try {n1 = v1.split(".")[1].length;}catch(e){};
                    try {n2 = v2.split(".")[1].length;}catch(e){};
                    return Number(v1.replace(".",""))/Number(v2.replace(".",""))/Math.pow(10,n1-n2);
                }
    };
  function operating(type,val1,val2){ //计算值
      switch (type){
          case "+":
              return operatin.addition(val1,val2);
              break;
          case "-":
              return operatin.addition(val1,-val2);
              break;
          case "*":
              return operatin.ride(val1,val2);
              break;
          case "/":
              return operatin.division(val1,val2);
              break;
      }
  }
    function numArray(value){
        var arry = new Array();
        var txt="+-*/";
        for(var i=0;i<value.length;i++){
            if(txt.indexOf(value[i])!=-1){
                arry.unshift(value[i]);
                arry=arry.concat(value.split(value[i]));
            }
        }
       return arry;
    }
    function clickfn(){
        var obj = document.getElementsByTagName("input");
        var txt = document.getElementById("txt");
        for(var i=0;i<obj.length;i++){
            obj[i].onclick = function(){
                var val = this.value;
                var ht = txt.innerHTML;
                switch (val){
                    case "C":
                        txt.innerHTML="";
                        break;
                    case "<-":
                        txt.innerHTML=ht.substring(0,ht.length-1);
                        break;
                    case "=":
                        if(numArray(ht).length==3&&numArray(ht)[2]!=""){
                            var numa = numArray(ht);
                            txt.innerHTML=operating(numa[0],numa[1],numa[2]);
                        }
                        break;
                    default:
                        if(numArray(ht).length==3&&(/\+|\-|\*|\//g).test(val)&&numArray(ht)[2]!=""){
                            var numa = numArray(ht);
                            txt.innerHTML=operating(numa[0],numa[1],numa[2])+val;
                        }else{
                            if(isNaN(ht.substr(ht.length-1,ht.length))&&isNaN(val)){
                                txt.innerHTML = ht.substr(0,ht.length-1)+val;
                            }else if(ht==""&&isNaN(val)){
                                txt.innerHTML = "";
                            }else{
                                txt.innerHTML+= val;
                            }
                        }
                }
            }
        }
    }
    clickfn();
</script>
</html>