用jQ实现一个简易计算器

HTML和CSS结构:

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jq.js"></script>
<style>
input[type="text"]{
margin-bottom: 20px;
text-align: right;
}
</style>
</head>
<body>
<input type="text"><br>
<div class="number">
<input type="button" value="0">
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<input type="button" value="4">
<input type="button" value="5">
<input type="button" value="6">
<input type="button" value="7">
<input type="button" value="8">
<input type="button" value="9">
<input type="button" value=".">
</div>
<div class="char">
<input type="button" value="+">
<input type="button" value="-">
<input type="button" value="*">
<input type="button" value="/">
</div>
<div class="result">
<input type="button" value="=">
</div>
<div class="delete">
<input type="button" value="delete">
</div>
<script> </script>
</body>
</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在这里的作用相当于一个容易,新的值不断的加上原来的值,并覆盖掉旧的值

第二步:添加运算符事件

     <script>
var num="";
//声明一个变量char,来存放运算符
var char="";
$(".number input").click(function(){
var value = $(this).val();
num = num+value;
$("input[type='text']").val(num);
})
//添加运算符点击事件
$(".char input").click(function(){
//获取当前点击的运算符存进变量char中
char = $(this).val();
//在input框中输出num+char
$("input[type='text']").val(num+char);
})
</script>

第三步:显示出数字1加上数字2

     <script>
var num="";
//申明变量num2,来存放数字2的值
var num2="";
var char="";
$(".number input").click(function(){
var value = $(this).val();
//如果变量char等于空字符串,则存取数字1的值,否则开始存取数字2的值
if(char==""){
num = num+value;
$("input[type='text']").val(num);
}else{
num2 = num2+value;
$("input[type='text']").val(num+char+num2);
}
})
$(".char input").click(function(){
char = $(this).val();
$("input[type='text']").val(num+char);
})
</script>

需要注意:

  • 我这里的数字1和数字2,代表的是需要运算的两个数
  • 什么时候存取数字1和数字2,当我点击了运算符的时候代表我要开始存取数字2,所以这里要做一个if判断,判断变量char是否为空,不为空的时候代表我点击了运算符,需要存取数字2了

第四步:点击等号运算结果

     <script>
var num="";
var num2="";
var char="";
//申明一个变量,来存放结果
var result;
$(".number input").click(function(){
var value = $(this).val();
if(char==""){
num = num+value;
$("input[type='text']").val(num);
}else{
num2 = num2+value;
$("input[type='text']").val(num+char+num2);
}
})
$(".char input").click(function(){
char = $(this).val();
$("input[type='text']").val(num+char);
})
//给等于号添加一个事件
$(".result input").click(function(){
//做一个判断,来根据点击的不同运算符,做不同的运算
switch(char){
case "+":
result = parseFloat(num) + parseFloat(num2);
break;
case "-":
result = parseFloat(num) - parseFloat(num2);
break;
case "*":
result = parseFloat(num) * parseFloat(num2);
break;
case "/":
result = parseFloat(num) / parseFloat(num2);
break;
}
//输出结果
$("input[type='text']").val(result);
})
</script>

第五步:实现连续点击运算符算出结果功能

     <script>
var num="";
var num2="";
var char="";
var result;
$(".number input").click(function(){
var value = $(this).val();
if(char==""){
num = num+value;
$("input[type='text']").val(num);
}else{
num2 = num2+value;
$("input[type='text']").val(num+char+num2);
}
})
$(".char input").click(function(){
//判断num2是否有值,如果有值的情况下点击运算符表示要做运算操作,输出结果和运算符号,
if(num2){
switch(char){
case "+":
result = parseFloat(num) + parseFloat(num2);
break;
case "-":
result = parseFloat(num) - parseFloat(num2);
break;
case "*":
result = parseFloat(num) * parseFloat(num2);
break;
case "/":
result = parseFloat(num) / parseFloat(num2);
break;
}
//把结果存进变量num
num = result;
//把num2清空方便再次点击存数字2
num2 = "";
$("input[type='text']").val(num+char);
}
char = $(this).val();
$("input[type='text']").val(num+char);
})
$(".result input").click(function(){
switch(char){
case "+":
result = parseFloat(num) + parseFloat(num2);
break;
case "-":
result = parseFloat(num) - parseFloat(num2);
break;
case "*":
result = parseFloat(num) * parseFloat(num2);
break;
case "/":
result = parseFloat(num) / parseFloat(num2);
break;
}
$("input[type='text']").val(result);
})
</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行代码放在判断语句前面就会出现点击第二次运算符后,前面的运算根据第二次点击的运算符来计算。

第五步:实现点击等号出结果后,我再点击数字,替换掉原来的值,开始新的运算

 <script>
var num="";
var num2="";
var char="";
var result;
var state = false;
$(".number input").click(function(){
var value = $(this).val();
if(char==""){
//如果点击了等号,并且char为空,清空num和num2的值,方便下面开始存新的数字1
if(state){
num="";
num2="";
//把值设置为false,意义表示没点击等号,没点击等号的时候不让这个if语句执行
state=false;
}
num = num+value;
$("input[type='text']").val(num);
}else{
num2 = num2+value;
$("input[type='text']").val(num+char+num2);
}
})
$(".char input").click(function(){
if(num2){
switch(char){
case "+":
result = parseFloat(num) + parseFloat(num2);
break;
case "-":
result = parseFloat(num) - parseFloat(num2);
break;
case "*":
result = parseFloat(num) * parseFloat(num2);
break;
case "/":
result = parseFloat(num) / parseFloat(num2);
break;
}
num = result;
num2 = "";
$("input[type='text']").val(num+char);
}
char = $(this).val();
$("input[type='text']").val(num+char);
})
$(".result input").click(function(){
switch(char){
case "+":
result = parseFloat(num) + parseFloat(num2);
break;
case "-":
result = parseFloat(num) - parseFloat(num2);
break;
case "*":
result = parseFloat(num) * parseFloat(num2);
break;
case "/":
result = parseFloat(num) / parseFloat(num2);
break;
}
$("input[type='text']").val(result);
//把字符串设为空,方面存取下一步清空操作,然后开始存取数字1的值
char = "";
//点击了等号后值变为true
state = true;
})

这步算是比较绕了,我点击了等号再点击数字需要清空num和num2的值,但是我点击运算符又不能清除num和num2的值,在哪里清空是需要去考虑的,上面我也说了点等号出结果后 点击数字表示我要开始存取变量一的值,那么需要点等号后,清空变量char="",然后才能去点击数字事件里面的 if里面去存取数字1,在存取数字1之前又需要判断是否点击了等号,如果点击了等号才执行清空的操作。

上一篇:实现两个MySQL数据库之间的主从同步


下一篇:IE 下的z-index BUG问题