學習筆記之javascript編寫簡單計算器

時間 2019-11-08

標籤學習筆記 javascript 編寫簡單計算器欄目 JavaScript 简体版

原文原文鏈接

感受本身的的實力真的是有待提升，在編寫計算器的過程當中，出現了各類各樣的問題，暴露了本身的基礎不紮實，邏輯思惟能力不夠，學得知識不能運用到本身的demo中區。先介紹一些這個這個計算器的總體思路。大體分爲三部分，首先是用戶點擊數字或者點的事件，若是點擊的是數字，則直接加到顯示屏上就好，若是用戶點擊的是點的話，組要慢組兩個條件，一個是，點不能重複，二是內容爲空的時候，須要在小數點前面加上零。而後是用戶點擊清空或者刪除的事件，清空事件就是把全部的內容都清空，而刪除事件則是把內容一個一個的刪除。點擊一次只刪除一個字符串。而後就是用戶點擊加減乘除的事件了，若是用戶點擊的是運算符號，須要注意若是用戶連續點擊同一個運算符，則只能顯示一個，能夠用數組的splice方法來代替前面的那個符號。最後一步就是用戶點擊等於號的事件了，等於號被觸發的時候，首先須要遍歷循環存儲內容的數組，把定義一個記錄運算符號出現次數的變量，封裝一個函數，用遞歸實現。答題的思路就是這個樣子，具體的實現看代碼。html

在編寫過程當中，首先發現字符串的截取的位置我沒注意，再次我又溫習了一遍。數組

　其次是獲取元素出現了問題。函數

而後就是不能及時想到用遞歸來運算，本身用了好多的辦法，發現都有漏洞，雖然浪費了好多時間，可是布的不說我學到了不少東西，程序不對就再改，沒什麼過不去的，只要堅持，熬過這段時間，future會很feature。（計算器還有bug，但願各位大佬們能幫忙完善一下哈）。ui







<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table {
            border-collapse: collapse;
            margin: auto auto;
        }

        td {
            width: 150px;
            line-height: 70px;
        }

        .btn,.btn1 {
            width: 150px;
            line-height: 70px;
            font-size: x-large;
            background-color: seagreen;
            opacity: 0.8;
        }

        .btn_click {
            width: 302px;
            line-height: 70px;
            font-size: x-large;
            background-color: salmon;
        }

        .txt {
            background-color: azure;
            width: 600px;
            line-height: 100px;
            font-size: x-large;
            text-align: right;
        }

        .btn:active {
            box-shadow: 0 0 5px 5px green;
        }

        .btn:hover {
            cursor: pointer;
        }

        .btn_click:hover {
            cursor: pointer;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <td colspan="4"><input class="txt" type="text" disabled /></td>
        </tr>
        <tr>
            <td colspan="2"><input class="btn_click" type="button" value="AC" /></td>
            <td colspan="2"><input class="btn_click" type="button" value="DEL" /></td>
        </tr>
        <tr>
            <td><input class="btn" type="button" value="7" /></td>
            <td><input class="btn" type="button" value="8" /></td>
            <td><input class="btn" type="button" value="9" /></td>
            <td><input class="btn" type="button" value="*" /></td>

        </tr>
        <tr>
            <td><input class="btn" type="button" value="4" /></td>
            <td><input class="btn" type="button" value="5" /></td>
            <td><input class="btn" type="button" value="6" /></td>
            <td><input class="btn" type="button" value="/" /></td>

        </tr>
        <tr>
            <td><input class="btn" type="button" value="1" /></td>
            <td><input class="btn" type="button" value="2" /></td>
            <td><input class="btn" type="button" value="3" /></td>
            <td><input class="btn" type="button" value="-" /></td>

        </tr>
        <tr>
            <td><input class="btn" type="button" value="0" /></td>
            <td><input class="btn" type="button" value="." /></td>
            <td><input class="btn" type="button" value="+" /></td>
            <td><input class="btn1" type="button" value="=" /></td>

        </tr>

    </table>
    <script>
        //只能實現兩位數的加減法！
        window.onload = function () {
            var arr = [];
            var str = "";
            var a=0;
            var arr1=[];           
            var str1 = "";
            var str2 = "";
            var arr2 = [];
            //首先把值放到txt中。
            var btn = document.getElementsByClassName("btn");//這是除了刪除以外的按鈕
            var txt = document.getElementsByClassName("txt")[0];//文本內容
            var anniu = document.getElementsByClassName("btn_click");
            // console.log(anniu);
            //循環遍歷
            for (var i = 0; i < btn.length; i++) {
                btn[i].onclick = function () {
                    if (!isNaN(this.value)||this.value==".") {//當前值是值或者數字
                       if(this.value=="."){//當前值是點
                            if(txt.value==""){//點前面沒有值
                                txt.value="0"+this.value;
                                arr.push(this.value);
                            }else{//前面有值 判斷前面有沒有點，有點就不在添加。沒有添加
                                if(txt.value.indexOf(".")==-1){//當前值不存在
                                    txt.value=txt.value+this.value;
                                    arr.push(this.value);
                                }
                                
                            }
                       }else{
                           txt.value+=this.value;
                           arr.push(this.value);
                       } 
                 }                        
                    else {//加減乘除   
                       console.log("之前的值:"+arr);
                        if(this.value==arr[arr.length-1]){
                            console.log("最後一個元素:"+arr[arr.length-1]);
                           arr=arr.splice(arr.length-1,1,this.value);
                           console.log("替換事後的arr："+arr);
                        txt.value=txt.value;

                        }else{
                            txt.value=txt.value+this.value;
                            arr.push(this.value);                           
                        }                 
                        // txt.value = txt.value + this.value;
                        // arr.push(this.value);
                    //     if(this.value==arr[arr.length]){
                            
                    //     }
                    }                
                }
            }           
             function fn(str){                
                let count=0;
                for (var i = 0; i < str.length; i++) {
                    if (str[i] == "+" || str[i] == "-" || str[i] == "*" ||str[i] == "/") {
                        count++;
                       if(count==2){
                        str1=str.slice(0,i);
                        str=work(str1)+str.slice(i);                     
                        count=0;
                        return fn(str);//最後兩個數
                       }                      
                    }     
                }
               //24+3
               console.log("最後的:"+str);
             
                return  work(str);
            }

            document.getElementsByClassName("btn1")[0].onclick = function(){              
                str=arr.join('');
                txt.value=fn(str);
            };
                    
            function work(str1) {
           
            
                for (var j = 0; j < str1.length; j++) {
                    if (str1[j] == "+") {//加號左右的兩個字符串加起來。變成一個新字符串。
                          a=parseFloat(str1.slice(0,j));  
                          console.log("a:"+a); 
                          b=parseFloat(str1.slice(j+1)); 
                          console.log("a:"+b);
                        sum=a+b;
                        console.log("和:"+sum);
                        return sum;
                    }
                    if (str1[j] == "-") {//加號左右的兩個字符串加起來。變成一個新字符串。
                          a=parseFloat(str1.slice(0,j));  
                       
                          console.log("a:"+a); 
                          b=parseFloat(str1.slice(j+1)); 
                          console.log("a:"+b);
                        sum=a-b;
                        console.log("和:"+sum);
                        return sum;
                    }
                    if (str1[j] == "*") {//加號左右的兩個字符串加起來。變成一個新字符串。
                          a=parseFloat(str1.slice(0,j));  
                       
                          console.log("a:"+a); 
                          b=parseFloat(str1.slice(j+1)); 
                          console.log("a:"+b);
                        sum=a*b;
                        console.log("和:"+sum);
                        return sum;
                    }
                    if (str1[j] == "/") {//加號左右的兩個字符串加起來。變成一個新字符串。
                          a=parseFloat(str1.slice(0,j));  
                       
                          console.log("a:"+a); 
                          b=parseFloat(str1.slice(j+1)); 
                          console.log("a:"+b);
                        sum=a/b;
                        console.log("和:"+sum);
                        return sum;
                    }
                }
            }
            //cishi 此時按下的是清空或者刪除鍵
            for (var j = 0; j < anniu.length; j++) {
                anniu[j].onclick = function () {
                    if (this.value == "AC") {//把全部東西都清空 是this不是
                        txt.value = "";
                        arr = [];
                    } else {//按下的是刪除鍵，若是是刪除鍵，就把前一個數或者符號刪除
                        //能夠截取字符串，而後在從新加到【屏幕上 substr \
                        txt.value = txt.value.substr(0, txt.value.length - 1);
                    }
                }
            }
         }

    </script>
</body>

</html>