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之前又需要判断是否点击了等号，如果点击了等号才执行清空的操作。