先展示UI界面
先进行逻辑分析
1.界面
外层宽250px,长600px用来显示计算器主界面分上下结构 上:用来显示数字 1.显示结果
2.显示输入数字
下:用来显示按钮 ul li button
依次为 AC +/- % /
7 8 9 *
4 5 6 -
1 2 3 +
0 . =
2.按钮点击事件(输入层变量resval,显示层变量sumval,运算符变量operator)
AC清除 将resval与显示为0,将显示层变量为0,显示为空
数字1-9: 1.判断 输入框为0 resval为0,输入层显示为空
2.判断 前一次输入为等于(运算符状态为0) 运算符状态改为1 ,resval为0,输入层显示为空
3.resval等于resval与输入数字字符串相加
4.在输入层显示resval
符号. 1.先判断前面是否有小数点 有 无操作结束
2.判断 前一次输入为等于(运算符状态为0) 运算符状态改为1 ,resval为0,输入层显示为0
3.录入小数点,将小数点作为字符串与resval进行字符串相加并显示在输入层
运算符(+-*/%) 1.判断前一次运算符 1.0 继续操作
2.非0 相当于先进行上一次运算符运算再进行运算符操作
2.将resval赋值给sumval
3.将sumval显示到结果层并加上运算符
4.输入层显示为空,resval为0
5.将此次运算符操作储存到变量operator中 +:1;-:2;*:3;/:4;%:5;缺省与=:0;
等号 判断前一次运算符 1. 在显示层 显示 sumval与resval运算
2. 将运算结果赋值给resval
3. 将resval在输入层显示
4. 将operator改为0
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算器</title>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
ul,li{list-style: none;}
.reveal{width:100%;height:100px;}
.reveal>input{height:50px;line-height: 50px;font-size:50px;color:#ffffff;background-color: black;text-align: right;border: none;width: 240px;padding-right: 10px;}
.button>ul>li>button{height:50px;width:45px;border:none;border-radius: 25px;margin:5px ;color:#ffffff;background-color:#585252;font-size:20px;}
.button>ul li:first-child>button{background:#D6D0CE;color:black;}
.button>ul li button:last-child{background:#F09C10;color:#ffffff;}
</style>
<script type="text/javascript">
$(function(){
//获取输入框元素
var res=$('.result');
//获取结果显示框
var sum=$('.sum');
var resval=0;
var sumval=0;
var operator=-1;
var jon=['+','_','*',''];
//求10的幂函数
function funm(n){
if(n==0){
return 1
}
return funm(n-1)*10
}
//AC清除按钮
$('.dump').on('click',function(){
res.val('0');
resval=0;
sum.val('');
sumber=0;
operator=-1;
});
//C清楚按钮
$('.clear').on('click',function(){
if(resval!='0'){
resval=resval.slice(0,resval.length-1);
res.val(resval);
}
})
//数字按钮
$(".number").on('click',function(){
//如果当前输入框数字为0或前一次输入为等号时
if(operator==0){
operator=-1;
res.val('0');
resval='';
}
if(resval=="0"){
res.val('0');
resval='';
}
resval=resval+$(this).html();
res.val(resval);
});
//小数点
$('.spot').on('click',function(){
//遍历输入框数字,检查是否有小数点
for(var i=0;i<resval.length;i++){
if(resval[i]=="."){
return false;
}
}
if(operator==0){
operator=1;
res.val('0')
resval=res.val();
}
resval=resval+$(this).html();
res.val(resval);
});
//运算符
$('.oper').on('click',function(){
if(operator != 0){
switch(operator){
case 0:
resval=Number(sumval)+Number(resval);
break;
case 1:
resval=Number(sumval)+Number(resval);
break;
case 2:
resval=Number(sumval)-Number(resval);
break;
case 3:
resval=Number(sumval)*Number(resval);
break;
case 4:
resval=Number(sumval)/Number(resval);
break;
case 5:
resval=Number(sumval)%Number(resval);
break;
}
}
operator=Number($(this).attr('operator'));
sumval=resval;
sum.val(resval+jon[operator-1]);
resval=0;
res.val('');
})
//等于
$('.equal').on('click',function(){
switch(operator){
case 0:
sum.val(sumval+'+'+resval);
resval=Number(sumval)+Number(resval);
res.val(resval);
operator=0;
break;
case 1:
sum.val(sumval+'+'+resval);
resval=Number(sumval)+Number(resval);
res.val(resval);
operator=0;
break;
case 2:
sum.val(sumval+'-'+resval);
resval=Number(sumval)-Number(resval);
res.val(resval);
operator=0;
break;
case 3:
sum.val(sumval+'*'+resval);
resval=Number(sumval)*Number(resval);
res.val(resval);
operator=0;
break;
case 4:
sum.val(sumval+'/'+resval);
resval=Number(sumval)/Number(resval);
res.val(resval);
operator=0;
break;
case 5:
sum.val(sumval+'%'+resval);
resval=Number(sumval)%Number(resval);
res.val(resval);
operator=0;
break;
}
});
});
</script>
</head>
<body>
<div style="width:250px;height:400px;background-color:black;margin:300px auto 0">
<div class="reveal">
<input type="button" name="" class="sum" style="width:250px">
<input type="text" name="" value="0" class="result">
</div>
<div class="button">
<ul>
<li>
<button class="dump">AC</button>
<button class="clear">C</button>
<button class="oper" operator="5">%</button>
<button class="oper" operator="4">/</button>
</li>
<li>
<button class="number">7</button>
<button class="number">8</button>
<button class="number">9</button>
<button class="oper" operator="3">*</button>
</li>
<li>
<button class="number">4</button>
<button class="number">5</button>
<button class="number">6</button>
<button class="oper" operator="2">-</button>
</li>
<li>
<button class="number">1</button>
<button class="number">2</button>
<button class="number">3</button>
<button class="oper" operator="1">+</button>
</li>
<li>
<button class="number" style="width:105px;">0</button>
<button class="spot">.</button>
<button class="equal" operator="0">=</button>
</li>
</ul>
</div>
</div>
</body>
</html>