単純な計算機の実装手順の JavaScript 分解-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

単純な計算機の実装手順の JavaScript 分解

高洛峰

Feb 04, 2017 pm 02:08 PM

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

単純な計算機の実装手順の JavaScript 分解

コード:

<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 &#39;Microsoft yahei&#39;; 
} 
#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=&#39;num&#39; /> 
</label></td> 
<td><input type="button" value="8" _type=&#39;num&#39; /></td> 
<td><input type="button" value="9" _type=&#39;num&#39; /></td> 
<td><input type="button" value="/" _type=&#39;op&#39; /></td> 
</tr> 
<tr> 
<td><input type="button" value="4" _type=&#39;num&#39; /></td> 
<td><input type="button" value="5" _type=&#39;num&#39; /></td> 
<td><input type="button" value="6" _type=&#39;num&#39; /></td> 
<td><input type="button" value="*" _type=&#39;op&#39; /></td> 
</tr> 
<tr> 
<td><input type="button" value="1" _type=&#39;num&#39; /></td> 
<td><input type="button" value="2" _type=&#39;num&#39; /></td> 
<td><input type="button" value="3" _type=&#39;num&#39; /></td> 
<td><input type="button" value="-" _type=&#39;op&#39; /></td> 
</tr> 
<tr> 
<td><input type="button" value="0" _type=&#39;num&#39; /></td> 
<td><input type="button" value="+/-" _type=&#39;+/-&#39; /></td> 
<td><input type="button" value="." _type=&#39;.&#39; /></td> 
<td><input type="button" value="+" _type=&#39;op&#39; /></td> 
</tr> 
<tr> 
<td colspan="2" id="debug"><input type="button" value="backspace" _type=&#39;bs&#39; /></td> 
<td><input type="button" value="C" _type=&#39;cls&#39; /></td> 
<td><input type="button" value="=" _type=&#39;eval&#39; /></td> 
</tr> 
</tbody> 
</table> 
<script> 
//计算对象 
var operateExp={ 
&#39;+&#39;:function(num1,num2){return num1+num2;}, 
&#39;-&#39;:function(num1,num2){return num1-num2;}, 
&#39;*&#39;:function(num1,num2){return num1*num2;}, 
&#39;/&#39;: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===&#39;bs&#39;){//退格键 
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===&#39;num&#39;){//数字键 
if(num===&#39;0&#39;||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> 
View Code

ログイン後にコピー

詳細内訳:
最初: 分岐計算部分では switch ステートメントを使用せず、名前と値のペアの形式を使用します。

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

ログイン後にコピー

2 番目: オブジェクトイベントのプロパティを使用して、クリックされたオブジェクトのタイプを取得します。イベントバブリングを使用してイベントをキャプチャし、分類します。

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===&#39;bs&#39;){//退格键 
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===&#39;num&#39;){//数字键 
if(num===&#39;0&#39;||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; 
} 
} 
}

ログイン後にコピー

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

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

ログイン後にコピー

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

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

ログイン後にコピー

5 番目: オペランドをフィルターし、計算を完了します。

//计算函数 
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); 
}

ログイン後にコピー

その他の JavaScript 簡易電卓実装ステップ分解関連記事については、PHP 中国語 Web サイトに注目してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7504

CakePHP チュートリアル

1378

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか？ Mar 18, 2025 pm 03:12 PM

記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。

ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか？ Mar 18, 2025 pm 03:14 PM

この記事では、ブラウザでJavaScriptのパフォーマンスを最適化するための戦略について説明し、実行時間の短縮、ページの負荷速度への影響を最小限に抑えることに焦点を当てています。

フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか？ Apr 04, 2025 pm 02:42 PM

フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

ブラウザ開発者ツールを使用してJavaScriptコードを効果的にデバッグするにはどうすればよいですか？ Mar 18, 2025 pm 03:16 PM

この記事では、ブラウザ開発者ツールを使用した効果的なJavaScriptデバッグについて説明し、ブレークポイントの設定、コンソールの使用、パフォーマンスの分析に焦点を当てています。

ソースマップを使用して、マイナイドJavaScriptコードをデバッグするにはどうすればよいですか？ Mar 18, 2025 pm 03:17 PM

この記事では、ソースマップを使用して、元のコードにマッピングすることにより、Minified JavaScriptをデバッグする方法について説明します。ソースマップの有効化、ブレークポイントの設定、Chrome DevtoolsやWebpackなどのツールの使用について説明します。

誰がより多くのPythonまたはJavaScriptを支払われますか？ Apr 04, 2025 am 12:09 AM

スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。

chart.js：パイ、ドーナツ、バブルチャートを始めます Mar 15, 2025 am 09:19 AM

このチュートリアルでは、chart.jsを使用してパイ、リング、およびバブルチャートを作成する方法について説明します。以前は、4つのチャートタイプのchart.js：ラインチャートとバーチャート（チュートリアル2）、およびレーダーチャートと極地域チャート（チュートリアル3）を学びました。パイとリングチャートを作成しますパイチャートとリングチャートは、さまざまな部分に分かれている全体の割合を示すのに理想的です。たとえば、パイチャートを使用して、サファリの男性ライオン、女性ライオン、若いライオンの割合、または異なる候補者が選挙で受け取る票の割合を示すことができます。パイチャートは、単一のパラメーターまたはデータセットの比較にのみ適しています。パイチャートのファンの角度はデータポイントの数値サイズに依存するため、パイチャートは値のあるエンティティをゼロ値で描画できないことに注意してください。これは、割合がゼロのエンティティを意味します