1. 수학연산 ", -, *, /" 활용
2. 입력 내용 판단, 이벤트 객체의 출처 판단
<스타일>
#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%;
}
<머리>
|
<라벨>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<입력 유형="버튼" 값="." _type='.' /> |
|
|
|
|
<스크립트>
//计算对象
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> ;
코드 보기
상세 분석:
첫 번째:
분기 계산 부분은 스위치 문을 사용하지 않고 이름-값 형식을 사용합니다. 한 쌍.
코드 복사
코드는 다음과 같습니다.
둘째:
객체 이벤트의 속성을 사용하여 클릭한 객체의 유형을 가져옵니다. 이벤트 버블링을 사용하여 이벤트를 캡처하고 분류합니다.
코드 복사
코드는 다음과 같습니다.
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)
}
성명：본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
