js版實現計算器功能

本文例項為大家分享了實現計算器功能的具體程式碼，供大家參考，具體內容如下

在老師的帶領下完成了這個簡單的計算器，這是一個神奇的過程，計算器的基本功能都是有的。雖然是個簡單的計算器，但對初學者來說，還是需要強大的邏輯判斷能力，裡面有很多的條件，作為開發者要不斷的尋找設計裡的bug，不斷地完善使用者的需求，而這些都需要清晰的邏輯推理和判斷，我有點頭大了。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>計算器</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,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 classwww.cppcns.com 
="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=[];  //定義一個數組儲存輸入的值
    var label=false;
    for(var i=0;i<buttonal.length;i++){
        buttonal [i].onclick=addclick;
        function addclick(){
            //輸入為數字或者為“.”
            if(!isNaN(this.innerHTML) || this.innerHTML=="."){
                //文字框初值不為0
                label = true;
                if(textal.value!== "0"){
                    //文字框中含有“.”
       
              if(textal.value.indexOf(".")!==-1){
                        //處理點重複的問題   文字框裡面有點 不上去點（使用者按的數字 得加  使用者按的是點 不加）
                        //輸入"."時
                        if(this.innerHTML!== "."){
                            textal.value+=this.innerHTML;
                        }
                    }
                www.cppcns.com    else{
                        textal.value+=this.innerHTML;
                    }
                }
                //文字框初值為0
                else{
                  if(this.innerHTML =="."){
                      textal.value="0"+this.innerHTML ;
                  }
                  else{
                      textal.value=this.innerHTML;
                  }
                }
            }
            //非數字
            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?"除數不能為零":result;
                            //console.log(res.join(""));
                            res=[];
                            break;
                  case "del":
                            //從後往前一個一個的減數字  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){
        //清屏之前儲存使用者按的值
       // 確認一個條件  使用者是連續按符號  還是數字+符號
        if(!label){   //連續兩次按符號時
            res[res.length-1]=mini.innerHTML ;  //第二次按的符號替代第一次的
        }
        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>

效果圖：

js版實現計算器功能

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

js版實現計算器功能

js版實現計算器功能

js實現計算器功能

python實現計算器功能

java實現計算器功能

vue實現計算器功能

javascript實現計算器功能

node.js +mongdb實現登入功能

Python基於正則表示式實現計算器功能

js+canvas實現畫板功能

jQuery實現計算器功能

java awt實現計算器功能

普中89C51實現計算器功能分模式實現12種運算

Vue.js框架實現購物車功能

小程式實現計算器功能

微信小程式實現計算器功能

用微信小程式實現計算器功能

javascript實現計算器功能詳解流程

JS實現基本的網頁計算器功能示例

vue.js實現簡單的計算器功能

JS實現多功能計算器

js版實現計算器功能

相關推薦