HTML和CSS結構：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script src="jq.js"></script> 7 <style> 8 input[type="text"]{ 9 margin-bottom: 20px; 10 text-align: right; 11 } 12 </style> 13 </head> 14 <body> 15 <input type="text"><br> 16 <div class="number"> 17 <input type="button" value="0"> 18 <input type="button" value="1"> 19 <input type="button" value="2"> 20 <input type="button" value="3"> 21 <input type="button" value="4"> 22 <input type="button" value="5"> 23 <input type="button" value="6"> 24 <input type="button" value="7"> 25 <input type="button" value="8"> 26 <input type="button" value="9"> 27 <input type="button" value="."> 28 </div> 29 <div class="char"> 30 <input type="button" value="+"> 31 <input type="button" value="-"> 32 <input type="button" value="*"> 33 <input type="button" value="/"> 34 </div> 35 <div class="result"> 36 <input type="button" value="="> 37 </div> 38 <div class="delete"> 39 <input type="button" value="delete"> 40 </div> 41 <script> 42 43 </script> 44 </body> 45 </html>
下面來一步步實現計算器的功能
第一步:首先實現點擊數字不斷的顯示出來
<script>
//存取數字一的容器
var num="";
//給所有數字添加點擊事件
$(".number input").click(function(){
//獲取當前點擊的value值
var value = $(this).val();
//因為 value和num是字符串，加號在這里是連接字符串，然后存進變量num里面
num = num+value;
//把變量num在input里面輸出
$("input[type='text']").val(num);
})
</script>
需要注意：
- val()為input標簽專用的一個方法，能獲取input標簽的value值，括號里面傳入參數表示替換掉原來的值
- 這里變量num需要放在函數外面，如果放在函數里面，每次點擊的時候又重新申明了num值為空字符串，達不到我們想要的效果，
- $(this).val()獲取的是一個字符串
- num在這里的作用相當於一個容易，新的值不斷的加上原來的值，並覆蓋掉舊的值
第二步：添加運算符事件
1 <script> 2 var num=""; 3 //聲明一個變量char，來存放運算符 4 var char=""; 5 $(".number input").click(function(){ 6 var value = $(this).val(); 7 num = num+value; 8 $("input[type='text']").val(num); 9 }) 10 //添加運算符點擊事件 11 $(".char input").click(function(){ 12 //獲取當前點擊的運算符存進變量char中 13 char = $(this).val(); 14 //在input框中輸出num+char 15 $("input[type='text']").val(num+char); 16 }) 17 </script>
第三步：顯示出數字1加上數字2
1 <script> 2 var num=""; 3 //申明變量num2，來存放數字2的值 4 var num2=""; 5 var char=""; 6 $(".number input").click(function(){ 7 var value = $(this).val(); 8 //如果變量char等於空字符串，則存取數字1的值，否則開始存取數字2的值 9 if(char==""){ 10 num = num+value; 11 $("input[type='text']").val(num); 12 }else{ 13 num2 = num2+value; 14 $("input[type='text']").val(num+char+num2); 15 } 16 }) 17 $(".char input").click(function(){ 18 char = $(this).val(); 19 $("input[type='text']").val(num+char); 20 }) 21 </script>
需要注意：
- 我這里的數字1和數字2，代表的是需要運算的兩個數
- 什么時候存取數字1和數字2，當我點擊了運算符的時候代表我要開始存取數字2，所以這里要做一個if判斷，判斷變量char是否為空，不為空的時候代表我點擊了運算符，需要存取數字2了
第四步：點擊等號運算結果
1 <script> 2 var num=""; 3 var num2=""; 4 var char=""; 5 //申明一個變量，來存放結果 6 var result; 7 $(".number input").click(function(){ 8 var value = $(this).val(); 9 if(char==""){ 10 num = num+value; 11 $("input[type='text']").val(num); 12 }else{ 13 num2 = num2+value; 14 $("input[type='text']").val(num+char+num2); 15 } 16 }) 17 $(".char input").click(function(){ 18 char = $(this).val(); 19 $("input[type='text']").val(num+char); 20 }) 21 //給等於號添加一個事件 22 $(".result input").click(function(){ 23 //做一個判斷，來根據點擊的不同運算符，做不同的運算 24 switch(char){ 25 case "+": 26 result = parseFloat(num) + parseFloat(num2); 27 break; 28 case "-": 29 result = parseFloat(num) - parseFloat(num2); 30 break; 31 case "*": 32 result = parseFloat(num) * parseFloat(num2); 33 break; 34 case "/": 35 result = parseFloat(num) / parseFloat(num2); 36 break; 37 } 38 //輸出結果 39 $("input[type='text']").val(result); 40 }) 41 </script>
第五步：實現連續點擊運算符算出結果功能
1 <script> 2 var num=""; 3 var num2=""; 4 var char=""; 5 var result; 6 $(".number input").click(function(){ 7 var value = $(this).val(); 8 if(char==""){ 9 num = num+value; 10 $("input[type='text']").val(num); 11 }else{ 12 num2 = num2+value; 13 $("input[type='text']").val(num+char+num2); 14 } 15 }) 16 $(".char input").click(function(){ 17 //判斷num2是否有值，如果有值的情況下點擊運算符表示要做運算操作，輸出結果和運算符號， 18 if(num2){ 19 switch(char){ 20 case "+": 21 result = parseFloat(num) + parseFloat(num2); 22 break; 23 case "-": 24 result = parseFloat(num) - parseFloat(num2); 25 break; 26 case "*": 27 result = parseFloat(num) * parseFloat(num2); 28 break; 29 case "/": 30 result = parseFloat(num) / parseFloat(num2); 31 break; 32 } 33 //把結果存進變量num 34 num = result; 35 //把num2清空方便再次點擊存數字2 36 num2 = ""; 37 $("input[type='text']").val(num+char); 38 } 39 char = $(this).val(); 40 $("input[type='text']").val(num+char); 41 }) 42 $(".result input").click(function(){ 43 switch(char){ 44 case "+": 45 result = parseFloat(num) + parseFloat(num2); 46 break; 47 case "-": 48 result = parseFloat(num) - parseFloat(num2); 49 break; 50 case "*": 51 result = parseFloat(num) * parseFloat(num2); 52 break; 53 case "/": 54 result = parseFloat(num) / parseFloat(num2); 55 break; 56 } 57 $("input[type='text']").val(result); 58 }) 59 </script>
注意的地方：
- 為什么要 num = result 這行代碼的意義，比如我實現 2+3=5操作，則num="1",char="+",num2="3",result="5", 如果不把result值賦給num,得出5后，再點擊運算符就會出現2+，這是因為num的值為2,第40行代碼輸出了2+
- num2的值必須清空，如果不清點擊了運算符后點擊數字，會出現舊的值加上點擊的數字，這就不正確了
- 第39行代碼 char = $(this).val()，不能放在判斷語句前面，第二次點擊了運算符后，我們希望得到前面的運算結果，如果把39行代碼放在判斷語句前面就會出現點擊第二次運算符后，前面的運算根據第二次點擊的運算符來計算。
第五步：實現點擊等號出結果后，我再點擊數字，替換掉原來的值，開始新的運算
1 <script> 2 var num=""; 3 var num2=""; 4 var char=""; 5 var result; 6 var state = false; 7 $(".number input").click(function(){ 8 var value = $(this).val(); 9 if(char==""){ 10 //如果點擊了等號，並且char為空，清空num和num2的值，方便下面開始存新的數字1 11 if(state){ 12 num=""; 13 num2=""; 14 //把值設置為false，意義表示沒點擊等號,沒點擊等號的時候不讓這個if語句執行 15 state=false; 16 } 17 num = num+value; 18 $("input[type='text']").val(num); 19 }else{ 20 num2 = num2+value; 21 $("input[type='text']").val(num+char+num2); 22 } 23 }) 24 $(".char input").click(function(){ 25 if(num2){ 26 switch(char){ 27 case "+": 28 result = parseFloat(num) + parseFloat(num2); 29 break; 30 case "-": 31 result = parseFloat(num) - parseFloat(num2); 32 break; 33 case "*": 34 result = parseFloat(num) * parseFloat(num2); 35 break; 36 case "/": 37 result = parseFloat(num) / parseFloat(num2); 38 break; 39 } 40 num = result; 41 num2 = ""; 42 $("input[type='text']").val(num+char); 43 } 44 char = $(this).val(); 45 $("input[type='text']").val(num+char); 46 }) 47 $(".result input").click(function(){ 48 switch(char){ 49 case "+": 50 result = parseFloat(num) + parseFloat(num2); 51 break; 52 case "-": 53 result = parseFloat(num) - parseFloat(num2); 54 break; 55 case "*": 56 result = parseFloat(num) * parseFloat(num2); 57 break; 58 case "/": 59 result = parseFloat(num) / parseFloat(num2); 60 break; 61 } 62 $("input[type='text']").val(result); 63 //把字符串設為空，方面存取下一步清空操作，然后開始存取數字1的值 64 char = ""; 65 //點擊了等號后值變為true 66 state = true; 67 })
這步算是比較繞了，我點擊了等號再點擊數字需要清空num和num2的值，但是我點擊運算符又不能清除num和num2的值，在哪里清空是需要去考慮的，上面我也說了點等號出結果后 點擊數字表示我要開始存取變量一的值，那么需要點等號后，清空變量char=""，然后才能去點擊數字事件里面的 if里面去存取數字1，在存取數字1之前又需要判斷是否點擊了等號，如果點擊了等號才執行清空的操作。