javascript-简单的计算器实现

知识点：

　　1、数学运算“+，-，*，/”的使用

　　2、输入内容的判断，对于事件对象的来源的判断

效果：

代码：

<style>
#calculate {
    line-height: 60px;
    text-align: center;
    background: #ccc;
    font-size: 16px;
    font-weight: bold;
}
#calculate tbody input{
    width: 100%;
    height: 60px;
    background:#033;
    color: #fff;
    font: bold 16px/1em 'Microsoft yahei';
}
#calculate tbody td{
    width: 25%;
    background: #fff;
}
#calculate_outPut{
    font-size: 20px;
    letter-spacing:2px;
    background:#fff;
    height: 40px;
    border: none;
    text-align: right;
    width: 100%;
}
</style>
<table width="300" border="0" cellspacing="1" cellpadding="0" id="calculate">
 <thead >
  <tr>
    <td colspan="4" align="right"><input id="calculate_outPut" value="0" disabled="disabled"></td>
    </tr>
 </thead>
 <tbody  id="calculate_num">
  <tr>
    <td><label>
      <input type="button" name="button" id="button" value="7" _type='num' />
    </label></td>
    <td><input type="button" value="8" _type='num' /></td>
    <td><input type="button" value="9" _type='num' /></td>
    <td><input type="button" value="/" _type='op' /></td>
  </tr>
  <tr>
    <td><input type="button" value="4" _type='num' /></td>
    <td><input type="button" value="5" _type='num' /></td>
    <td><input type="button" value="6" _type='num' /></td>
    <td><input type="button" value="*" _type='op' /></td>
  </tr>
  <tr>
    <td><input type="button" value="1" _type='num' /></td>
    <td><input type="button" value="2" _type='num' /></td>
    <td><input type="button" value="3" _type='num' /></td>
    <td><input type="button" value="-" _type='op' /></td>
  </tr>
  <tr>
    <td><input type="button" value="0" _type='num' /></td>
    <td><input type="button" value="+/-" _type='+/-' /></td>
    <td><input type="button" value="." _type='.' /></td>
    <td><input type="button" value="+" _type='op' /></td>
  </tr>
  <tr>
    <td colspan="2" id="debug"><input type="button" value="backspace" _type='bs' /></td>
    <td><input type="button" value="C" _type='cls' /></td>
    <td><input type="button" value="=" _type='eval' /></td>
  </tr>
  </tbody>
</table>
<script>
//计算对象
var operateExp={
    '+':function(num1,num2){return num1+num2;},
    '-':function(num1,num2){return num1-num2;},
    '*':function(num1,num2){return num1*num2;},
    '/':function(num1,num2){return num2===0?0:num1/num2;}
}

//计算函数
var operateNum=function(num1,num2,op){
    if(!(num1&&num2))return;
    //保证num1,num2都为数字
    num1=Number(num1);
    num2=Number(num2);
    //不存在操作符,返回num1;
    if(!op)return num1;
    //匹配运算公式    
    if(!operateExp[op])return 0;
    return operateExp[op](num1,num2);
}
//显示面板
var calculate_outPut=document.getElementById("calculate_outPut");
//操作面板
var calculate_num=document.getElementById("calculate_num");

var result=0;//计算结果
var isReset=false;//是否重新设置
var operation;//操作符

//设置显示屏的值
function setScreen(num){
    calculate_outPut.value=num;    
}
//获取显示屏的值
function getScreen(){
    return calculate_outPut.value;    
}
//添加点击事件
calculate_num.onclick=function(e){
    
    var ev = e || window.event;
    var target = ev.target || ev.srcElement;
    
    if(target.type=="button"){
        
        var mark=target.getAttribute("_type");//获取当前点击button的自定义的属性。
        var value=target.value;//获取当前的值
        var num=getScreen();//获取当前框的值

        if(mark==='bs'){//退格键
            if(num==0)return;
            var snum=Math.abs(num).toString();
            if(snum.length<2)
                setScreen(0);
            else            
                setScreen(num.toString().slice(0,-1));
        }
        
        if(mark==='num'){//数字键    
            if(num==='0'||isReset){//有操作符或显示屏为0                
                setScreen(value);
                isReset=false;
                return;
            }            
            setScreen(num.toString().concat(value));
        }
        
        if(mark==="."){//小数点
            var hasPoint=num.toString().indexOf(".")>-1;            
            if(hasPoint){
                if(isReset){
                    setScreen("0"+value);
                    isReset=false;
                    return;
                }
                return;
            }            
            setScreen(num.toString().concat(value));
        }
        
        if(mark==="+/-"){//正负号
            setScreen(-num);            
        }
        
        if(mark==="op"){//如果点击的是操作符则设计第一个操作数    
            if(isReset)return;
            isReset=true;
            if(!operation){
                result=+num;
                operation=value;
                return;
            }            
            result=operateNum(result,num,operation);            
            setScreen(result);
            operation=value;
        }
        if(mark==="cls"){//清零
            result=0;
            setScreen(result);        
            isReset=false;
        }
        if(mark==="eval"){//计算
            if(!operation)return;            
            result=operateNum(result,num,operation);
            setScreen(result);
            operation=null;
            isReset=false;            
        }
        
    }
}
</script>

详细分解：

　　第一：分支计算部分没有使用switch 语句，使用了名值对的形式。

//计算对象
var operateExp={
    '+':function(num1,num2){return num1+num2;},
    '-':function(num1,num2){return num1-num2;},
    '*':function(num1,num2){return num1*num2;},
    '/':function(num1,num2){return num2===0?0:num1/num2;}
}

　　第二：对象事件的属性的使用，获取点击对象的类型。利用事件冒泡，捕获事件，并对事件进行分类处理。

calculate_num.onclick=function(e){
    
    var ev = e || window.event;
    var target = ev.target || ev.srcElement;
    
    if(target.type=="button"){
        
        var mark=target.getAttribute("_type");//获取当前点击button的自定义的属性。
        var value=target.value;//获取当前的值
        var num=getScreen();//获取当前框的值

        if(mark==='bs'){//退格键
            if(num==0)return;
            var snum=Math.abs(num).toString();
            if(snum.length<2)
                setScreen(0);
            else            
                setScreen(num.toString().slice(0,-1));
        }
        
        if(mark==='num'){//数字键    
            if(num==='0'||isReset){//有操作符或显示屏为0                
                setScreen(value);
                isReset=false;
                return;
            }            
            setScreen(num.toString().concat(value));
        }
        
        if(mark==="."){//小数点
            var hasPoint=num.toString().indexOf(".")>-1;            
            if(hasPoint){
                if(isReset){
                    setScreen("0"+value);
                    isReset=false;
                    return;
                }
                return;
            }            
            setScreen(num.toString().concat(value));
        }
        
        if(mark==="+/-"){//正负号
            setScreen(-num);            
        }
        
        if(mark==="op"){//如果点击的是操作符则设计第一个操作数    
            if(isReset)return;
            isReset=true;
            if(!operation){
                result=+num;
                operation=value;
                return;
            }            
            result=operateNum(result,num,operation);            
            setScreen(result);
            operation=value;
        }
        if(mark==="cls"){//清零
            result=0;
            setScreen(result);        
            isReset=false;
        }
        if(mark==="eval"){//计算
            if(!operation)return;            
            result=operateNum(result,num,operation);
            setScreen(result);
            operation=null;
            isReset=false;            
        }
        
    }
}

　　第三：全局变量的使用，利用全局变量对局部操作进度进行控制。（状态控制）　

var result=0;//计算结果
var isReset=false;//是否重新设置
var operation;//操作符

　　第四：对页面操作进行分离，解耦合。

//设置显示屏的值
function setScreen(num){
    calculate_outPut.value=num;    
}
//获取显示屏的值
function getScreen(){
    return calculate_outPut.value;    
}

　　第五：过滤操作数，完成计算。

//计算函数
var operateNum=function(num1,num2,op){
    if(!(num1&&num2))return;
    //保证num1,num2都为数字
    num1=Number(num1);
    num2=Number(num2);
    //不存在操作符,返回num1;
    if(!op)return num1;
    //匹配运算公式    
    if(!operateExp[op])return 0;
    return operateExp[op](num1,num2);
}