馬扎糖女孩

公告

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

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

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

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

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







<!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>

posted on 2019-08-22 22:58 牛扎糖女孩閱讀(237) 評論(0) 收藏舉報

刷新頁面返回頂部

馬扎糖女孩

導航

公告

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