javascript-간단한 계산기 구현 단계 분해(사진 포함)

지식 :
1. 수학연산 ", -, *, /" 활용
2. 입력 내용 판단, 이벤트 객체의 출처 판단
효과 :
javascript-간단한 계산기 구현 단계 분해(사진 포함)_javascript 기술

코드:

코드 복사 코드는 다음과 같습니다. 다음과 같습니다:

<스타일>
#calculate {
줄 높이: 60px;
텍스트 정렬: 가운데;
배경: #ccc;
글꼴 크기: 16px;
글꼴 두께: 굵게;
}
#tbody 입력 계산{
width: 100%;
높이: 60px;
배경:#033;
색상: #fff;
글꼴: 굵은 16px/1em 'Microsoft yahei';
}
#tbody td 계산{
너비: 25%;
배경: #fff;
}
#calculate_outPut{
글꼴 크기: 20px;
글자 간격:2px;
배경:#fff;
높이: 40px;
경계: 없음;
텍스트 정렬: 오른쪽;
너비: 100%;
}

<머리>

<스크립트>
//计算对象
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=숫자(숫자2);
//불存재操작작符,返回num1;
if(!op)return num1;
//匹配运算公式
if(!operateExp[op])return 0;
operateExp[op](num1,num2)를 반환합니다.
}
//显示面板
var 계산_outPut=document.getElementById("calculate_outPut");
//작업면수
var 계산_num=document.getElementById("calculate_num");
var result=0;//计算结果
var isReset=false;//是否重新设置
var Operation;//操work符
//设置显示屏的值
function setScreen (숫자){
calculate_outPut.value=num;
}
//获取显示屏的值
function getScreen(){
returncalculate_outPut.value;
}
//添加点击事件
calculate_num.onclick=function(e){
var ev = e || 창.이벤트;
var target = ev.target || ev.srcElement;
if(target.type=="button"){
var mark=target.getAttribute("_type");//이전 버튼은 사용자 정의 특성입니다.
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;
}
setScreen(num.toString().concat(value))
}
if(mark===" /-") //양수 및 음수
setScreen(-num);
}
if(mark==="op"){//클릭이 연산자인 경우 첫 번째 피연산자를 디자인합니다.
if(isReset) return;
isReset=true;
if(!작업){
결과=값
return; OperanNum(결과, 숫자,작업);
setScreen(결과);
작업=값;
}
if(mark==="cls"){//Clear
result= 0;
setScreen(결과);
isReset=false;
}
if(mark==="eval"){//계산
return; >result= OperateNum(결과,숫자,작업);
setScreen(결과);
isReset=false;
}
} ;/script> ;
코드 보기

상세 분석:

첫 번째:
분기 계산 부분은 스위치 문을 사용하지 않고 이름-값 형식을 사용합니다. 한 쌍.

코드 복사

코드는 다음과 같습니다.

//계산 개체var OperateExp ={ ' ':함수(숫자1,숫자2){반환 숫자1 숫자2;}, '-':함수(숫자1,숫자2){반환 숫자1-숫자2;}, '*':함수 (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"); //현재 클릭한 버튼의 사용자 정의 속성을 가져옵니다. 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; 
} 
setScreen(num.toString().concat(value)) 
} 
if(mark===" /-") //양수 및 음수 
setScreen(-num); 
} 
if(mark==="op"){//클릭이 연산자인 경우 첫 번째 피연산자를 디자인합니다. 
 if(isReset) return; 
isReset=true; 
if(!작업){ 
결과=값 
return; OperanNum(결과, 숫자,작업); 
setScreen(결과); 
작업=값; 
} 
if(mark==="cls"){//Clear
result= 0; 
setScreen(결과); 
isReset=false; 
} 
if(mark==="eval"){//계산
return; >result= OperateNum(결과,숫자,작업); 
setScreen(결과); 
isReset=false; 
} 
} 🎜> 

셋째: 
전역 변수 사용, 전역 변수를 사용하여 로컬 작업의 진행 상황을 제어합니다. (국가 제어) 




코드 복사


 코드는 다음과 같습니다. 

 
var result=0; //계산 결과
var isReset=false;//재설정 여부 
var 연산;//Operator

 

넷째: 페이지 연산 분리 및 분리 .

코드 복사 코드는 다음과 같습니다.

 
//디스플레이 화면 값 설정
function setScreen(num){ 
calculate_outPut.value=num; 
} 
//디스플레이 화면 값 가져오기
function getScreen (){ 
returncalculate_outPut.value; 
} 

다섯 번째: 피연산자를 필터링하고 계산을 완료합니다.

코드 복사 코드는 다음과 같습니다.

 
//계산 함수
var OperanNum =function( num1,num2,op){ 
if(!(num1&&num2))return; 
//num1과 num2가 모두 숫자인지 보장
num1=Number(num1) 
num2= Number(num2) ; 
//연산자가 없습니다. return num1; 
if(!op)return num1 
//매칭 연산식
if(!operateExp[op])return 0; 
 return OperateExp[op](num1,num2) 
} 


<라벨>


		<입력 유형="버튼" 값="." _type='.' />