做计算器之前得清楚自己要实现到哪一步,本文实现了一个简单的计算器,可以连续计算。要清楚对一个基本的两个数字的运算如何获取第一个值、第二个值;还有要计算3个数及以上的运算要如何处理;如何区分数字和符号本文的处理方式是:在点击符号之时获取第一个值,符号存在之后获取第二个值;计算3个数的运算时,先将前两个的结果计算出来,并显示在屏幕上;通过class来区分。
<div id="box" class="clearfix">
<p id="res" >0</p>
<ul id="key" class="clearfix">
<li class="num" value="1">1</li>
<li class="num" value="2">2</li>
<li class="num" value="3">3</li>
<li class="symbol" value="+">+</li>
<li class="num" value="4">4</li>
<li class="num" value="5">5</li>
<li class="num" value="6">6</li>
<li class="symbol" value="-">-</li>
<li class="num" value="7">7</li>
<li class="num" value="8">8</li>
<li class="num" value="9">9</li>
<li class="symbol" value="*">*</li>
<li class="num" value="0">0</li>
<li id="clear" value="C">C</li>
<li id="equl" value="=">=</li>
<li class="symbol" value="/">/</li>
</ul>
</div>
<script type='text/javascript'>
var oP=document.getElementById('res'),
oNum=document.getElementsByClassName('num'),
oSym=document.getElementsByClassName('symbol'),
oEqul=document.getElementById('equl'),
oClear=document.getElementById('clear'),
fuhao='',//用于存储符号和判断
fNum='',//存储第一个数字
sNum='',//第二个数字
show='' //用于清除第一次输入数字是,原来p标签存在的0
;
for(var i=0;i<oNum.length;i++){ //数字点击事件
oNum[i].οnclick=function(){
// alert(this.value);
if(fuhao){//如果有符号,则说明是第二个数
oP.innerHTML+=this.value;
sNum+=this.value;
// console.log(2);
}else{
show+=this.value;
oP.innerHTML=show;
// console.log(1);
}
};
}
for(var j=0;j<oSym.length;j++){ //运算符点击事件,this.value取出的值不对
oSym[j].οnclick=function(){
if(fuhao){ //如果之前有符号,则将上一次的结果计算出来,并且将它作为这一次的第一个数
var result='';
result=cal(fuhao);
fNum=result;
fuhao='';
sNum='';
oP.innerHTML =result + this.textContent;//显示上一步计算结果和这一次的符号
}else{//如果之前不存在符号
fNum=oP.innerHTML;//记录下第一个数
oP.innerHTML+=this.textContent;//将符号显示到p标签里
}
fuhao=this.textContent; //赋值给符号
};
}
oEqul.οnclick=function(){ //等号点击事件
var result='';
result=cal(fuhao);
oP.innerHTML=result;
//清空这次运算的值
clear();
};
oClear.οnclick=function(){
oP.innerHTML=0;
clear();
}
function clear(){
fNum='';
sNum='';
fuhao='';
show='';
}
function cal(fuhao){
var result='';
switch(fuhao){
case '+': result=Number(fNum) + Number(sNum);
break;
case '-': result=fNum - sNum;
break;
case '*': result=fNum * sNum;
break;
case '/':
if(sNum!='0'){
result=fNum / sNum;
}else{
alert('除数不能为0!');
}
break;
}
return result;
}
</script>