快捷導(dǎo)航

js版實(shí)現(xiàn)計(jì)算器功能

更新時(shí)間：2021年09月17日 11:26:51 作者：fanfan_h

這篇文章主要為大家詳細(xì)介紹了js版實(shí)現(xiàn)計(jì)算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)計(jì)算器功能的具體代碼，供大家參考，具體內(nèi)容如下

在老師的帶領(lǐng)下完成了這個(gè)簡(jiǎn)單的計(jì)算器，這是一個(gè)神奇的過程，計(jì)算器的基本功能都是有的。雖然是個(gè)簡(jiǎn)單的計(jì)算器，但對(duì)初學(xué)者來說，還是需要強(qiáng)大的邏輯判斷能力，里面有很多的條件，作為開發(fā)者要不斷的尋找設(shè)計(jì)里的bug，不斷地完善用戶的需求，而這些都需要清晰的邏輯推理和判斷，我有點(diǎn)頭大了。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>計(jì)算器</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        table{
            width:400px;
            margin:auto;
            border:1px solid silver;
            border-collapse: collapse;/*列與列的間距*/
        }
       td {
           width: 100px;
           border: 1px solid #525252;


       }
        td input{
            width:98.7%;
            height:60px;
            outline: none;
            text-align: right;
            font-size: 20px;
            background: rgba(251, 255, 227, 0.81);


        }
        td button{
            width:100%;
            height:60px;
            font-size: 22px;
            background: rgba(223, 255, 243, 0.81);
        }
    </style>
</head>
<body>
<table>
    <tr>
        <td colspan="4" ><input  id="text" type="text" value="0"  /></td>
    </tr>
    <tr>
        <td colspan="2"><button class="btn">del</button></td>
        <td colspan="2"><button class="btn">c</button></td>
    </tr>
    <tr>
        <td><button class="btn">9</button></td>
        <td><button class="btn">8</button></td>
        <td><button class="btn">7</button></td>
        <td><button class="btn">+</button></td>
    </tr>
    <tr>
        <td><button class="btn">6</button></td>
        <td><button class="btn">5</button></td>
        <td><button class="btn">4</button></td>
        <td><button class="btn">-</button></td>
    </tr>
    <tr>
        <td><button class="btn">3</button></td>
        <td><button class="btn">2</button></td>
        <td><button class="btn">1</button></td>
        <td><button class="btn">*</button></td>
    </tr>
    <tr>
        <td><button class="btn">0</button></td>
        <td><button class="btn">.</button></td>
        <td><button class="btn">=</button></td>
        <td><button class="btn">/</button></td>
    </tr>
</table>
<!--<span id="m">8</span>-->
<script>
   /* var M=document.getElementById ("m");

    console.log(M.innerHTML );
    console.log(M.innerText);*/
    //獲取按鈕
    var buttonal=document.getElementsByClassName ("btn");
    var textal=document.getElementById("text");
    var res=[];  //定義一個(gè)數(shù)組存儲(chǔ)輸入的值
    var label=false;
    for(var i=0;i<buttonal.length;i++){
        buttonal [i].onclick=addclick;
        function addclick(){
            //輸入為數(shù)字或者為“.”
            if(!isNaN(this.innerHTML) || this.innerHTML=="."){
                //文本框初值不為0
                label = true;
                if(textal.value!== "0"){
                    //文本框中含有“.”
                    if(textal.value.indexOf(".")!==-1){
                        //處理點(diǎn)重復(fù)的問題   文本框里面有點(diǎn) 不上去點(diǎn)（用戶按的數(shù)字 得加  用戶按的是點(diǎn) 不加）
                        //輸入"."時(shí)
                        if(this.innerHTML!== "."){
                            textal.value+=this.innerHTML;
                        }
                    }
                    else{
                        textal.value+=this.innerHTML;
                    }
                }
                //文本框初值為0
                else{
                  if(this.innerHTML =="."){
                      textal.value="0"+this.innerHTML ;
                  }
                  else{
                      textal.value=this.innerHTML;
                  }
                }
            }
            //非數(shù)字
            else{
              switch(this.innerHTML ) {
                  case "+" :save(this);
                            break;
                  case "-" :save(this);
                            break;
                  case "/" :save(this);
                            break;
                  case "*":save(this);
                            break;
                  case "=":
                            res.push(textal.value);
                            var result=eval(res.join(""));
                            if(result =="Infinity"){
                             remove_add ("remove");
                            }
                            textal.value=result==Infinity?"除數(shù)不能為零":result;
                            //console.log(res.join(""));
                            res=[];
                            break;
                  case "del":
                            //從后往前一個(gè)一個(gè)的減數(shù)字  substr(start,count)  substring(start,end) end不取
                             textal.value = textal.value.length==1 ? "0":textal.value.substr(0,textal.value.length-1);
                             break;
                  case "c":
                             textal.value="0";
                            res=[];
                            remove_add("add");
                            break;
              }
            }
        }
    }
    function save(mini){
        //清屏之前存儲(chǔ)用戶按的值
       // 確認(rèn)一個(gè)條件  用戶是連續(xù)按符號(hào)  還是數(shù)字+符號(hào)
        if(!label){   //連續(xù)兩次按符號(hào)時(shí)
            res[res.length-1]=mini.innerHTML ;  //第二次按的符號(hào)替代第一次的
        }
        else{
            res.push(textal.value );
            res.push(mini.innerHTML );
        }
        textal.value="0";
        label=false;
    }

    //卸載除c以外的所有元素的事件
     function remove_add(p){
         for(var i=0;i<buttonal.length;i++){
            if(p == "add"){
                buttonal[i].onclick = addclick;
            }
            else{
                if(buttonal[i].innerHTML!="c"){
                    buttonal[i].onclick = null;
                }
            }
         }
     }

</script>
</body>
</html>

效果圖：