您好,欢迎访问一九零五行业门户网

javascript-简单的计算器实现步骤分解(附图)_javascript技巧

知识点:
1、数学运算“+,-,*,/”的使用
2、输入内容的判断,对于事件对象的来源的判断
效果:
代码:
复制代码 代码如下:
view code
详细分解:
第一:分支计算部分没有使用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.lengthsetscreen(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);
}
其它类似信息

推荐信息