JavaScript - 簡単な電卓実装手順の分解 (画像付き)_JavaScript スキル

知識ポイント:
1. 算術演算 "、-、*、/" の使用
2. 入力内容の判断、イベントオブジェクトのソースの判断
効果:

コード:

コードをコピー コードは以下のように:

<スタイル>
#calculate {
行の高さ: 60px;
text-align: 中央;
背景: #ccc;
フォントサイズ: 16px;
フォントの太さ: 太字;
}
#calculate tbody input{
width: 100%;
高さ: 60px;
背景:#033;
色: #fff;
フォント: 太字 16px/1em 'Microsoft yahei';
}
#calculate tbody td{
width: 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;}
}
//计算関数
varoperateNum=function(num1,num2,op){
if(!(num1&&num2))return;
//保護num1,num2都は数字です
num1=Number(num1);
num2=数値(num2);
//存在しない操作符、戻り値1;
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 ||ウィンドウ.イベント;
var target = ev.target || ev.src要素;
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.lengthsetScreen(0) );
else
setScreen(num.toString().slice(0,-1));
}
if(mark==='num'){//数字キー
if (num==='0'||isReset){//演算子があるか、表示が 0
isReset=false
}
setScreen(num.toString().concat(value));
}
if(mark==="."){//小数点
var hasPoint=num.toString() .indexOf(" .")>-1;
if(hasPoint){
if(isReset){
setScreen("0" 値);
isReset=false; ;
}
return;
}
setScreen(num.toString().concat(value));
if(mark===" /-"){ // 正と負の No.
setScreen(-num);
}
if(mark==="op"){// クリックが演算子の場合、最初のオペランドを設計します
if(isReset) 戻り値;
isReset=true;
結果 = 数値;
結果 = operateNum(result, num,operation);
setScreen(result);
}
if(mark==="cls"){//Clear
0;
setScreen(result);
isReset=false;
if(mark==="eval"){//Calculate
if(!operation)return; >result=operateNum(result,num,operation);
setScreen(result);
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;} } 2 番目: オブジェクト イベントのプロパティを使用して、クリックされたオブジェクトのタイプを取得します。イベント バブリングを使用してイベントをキャプチャし、分類します。

コードをコピー


コードは次のとおりです。

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.lengthsetScreen(0) );

else

setScreen(num.toString().slice(0,-1));
}
if(mark==='num'){//数字キー
if (num==='0'||isReset){//演算子があるか、表示が 0
isReset=false
}
setScreen(num.toString().concat(value));
}
if(mark==="."){//小数点
var hasPoint=num.toString() .indexOf(" .")>-1;
if(hasPoint){
if(isReset){
setScreen("0" 値);
isReset=false; ;
}
return;
}
setScreen(num.toString().concat(value));
if(mark===" /-"){ // 正と負の No.
setScreen(-num);
}
if(mark==="op"){// クリックが演算子の場合、最初のオペランドを設計します
if(isReset) 戻り値;
isReset=true;
結果 = 数値;
結果 = operateNum(result, num,operation);
setScreen(result);
}
if(mark==="cls"){//Clear
0;
setScreen(result);
isReset=false;
if(mark==="eval"){//Calculate
if(!operation)return; >result=operateNum(result,num,operation);
setScreen(result);
isReset=false;
}



3 番目:
グローバル変数の使用。グローバル変数を使用してローカル操作の進行を制御します。 (状態制御)




コードをコピー


コードは次のとおりです。 //計算結果
var isReset=false;//
var 操作をリセットするかどうか;//演算子



4 番目:
ページ操作を分離および分離します。




コードをコピー


コードは次のとおりです:

//Set the value of the display screen
function setScreen(num){
calculate_outPut.value=num;
}
//Get the value of the display screen
function getScreen (){
return calculate_outPut.value;
}

Fifth: Filter the operands and complete the calculation.

Copy code The code is as follows:

//Calculate function
var operateNum=function( num1,num2,op){
if(!(num1&&num2))return;
//Guarantee that num1 and num2 are both numbers
num1=Number(num1);
num2=Number(num2) ;
//No operator exists, return num1;
if(!op)return num1;
//Matching operation formula
if(!operateExp[op])return 0;
return operateExp[op](num1,num2);
}