javascript-簡(jiǎn)單的計(jì)算器實(shí)現(xiàn)步驟分解(附圖)
更新時(shí)間：2013年05月30日 15:48:39 投稿：whsnow
輸入內(nèi)容的判斷，對(duì)于事件對(duì)象的來源的判斷以及數(shù)學(xué)運(yùn)算“+，-，*，/”的使用，感興趣的朋友可以學(xué)習(xí)下
知識(shí)點(diǎn)：
1、數(shù)學(xué)運(yùn)算“+，-，*，/”的使用
2、輸入內(nèi)容的判斷，對(duì)于事件對(duì)象的來源的判斷
效果：
代碼：
復(fù)制代碼 代碼如下:
<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 'Microsoft yahei';
}
#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='num' />
</label></td>
<td><input type="button" value="8" _type='num' /></td>
<td><input type="button" value="9" _type='num' /></td>
<td><input type="button" value="/" _type='op' /></td>
</tr>
<tr>
<td><input type="button" value="4" _type='num' /></td>
<td><input type="button" value="5" _type='num' /></td>
<td><input type="button" value="6" _type='num' /></td>
<td><input type="button" value="*" _type='op' /></td>
</tr>
<tr>
<td><input type="button" value="1" _type='num' /></td>
<td><input type="button" value="2" _type='num' /></td>
<td><input type="button" value="3" _type='num' /></td>
<td><input type="button" value="-" _type='op' /></td>
</tr>
<tr>
<td><input type="button" value="0" _type='num' /></td>
<td><input type="button" value="+/-" _type='+/-' /></td>
<td><input type="button" value="." _type='.' /></td>
<td><input type="button" value="+" _type='op' /></td>
</tr>
<tr>
<td colspan="2" id="debug"><input type="button" value="backspace" _type='bs' /></td>
<td><input type="button" value="C" _type='cls' /></td>
<td><input type="button" value="=" _type='eval' /></td>
</tr>
</tbody>
</table>
<script>
//計(jì)算對(duì)象
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;}
}
//計(jì)算函數(shù)
var operateNum=function(num1,num2,op){
if(!(num1&&num2))return;
//保證num1,num2都為數(shù)字
num1=Number(num1);
num2=Number(num2);
//不存在操作符,返回num1;
if(!op)return num1;
//匹配運(yùn)算公式
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;//計(jì)算結(jié)果
var isReset=false;//是否重新設(shè)置
var operation;//操作符
//設(shè)置顯示屏的值
function setScreen(num){
calculate_outPut.value=num;
}
//獲取顯示屏的值
function getScreen(){
return calculate_outPut.value;
}
//添加點(diǎn)擊事件
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");//獲取當(dāng)前點(diǎn)擊button的自定義的屬性。
var value=target.value;//獲取當(dāng)前的值
var num=getScreen();//獲取當(dāng)前框的值
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'){//數(shù)字鍵
if(num==='0'||isReset){//有操作符或顯示屏為0
setScreen(value);
isReset=false;
return;
}
setScreen(num.toString().concat(value));
}
if(mark==="."){//小數(shù)點(diǎn)
var hasPoint=num.toString().indexOf(".")>-1;
if(hasPoint){
if(isReset){
setScreen("0"+value);
isReset=false;
return;
}
return;
}
setScreen(num.toString().concat(value));
}
if(mark==="+/-"){//正負(fù)號(hào)
setScreen(-num);
}
if(mark==="op"){//如果點(diǎn)擊的是操作符則設(shè)計(jì)第一個(gè)操作數(shù)
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"){//計(jì)算
if(!operation)return;
result=operateNum(result,num,operation);
setScreen(result);
operation=null;
isReset=false;
}
}
}
</script>
View Code
詳細(xì)分解：
第一：分支計(jì)算部分沒有使用switch 語句，使用了名值對(duì)的形式。
復(fù)制代碼 代碼如下:
//計(jì)算對(duì)象
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;}
}
第二：對(duì)象事件的屬性的使用，獲取點(diǎn)擊對(duì)象的類型。利用事件冒泡，捕獲事件，并對(duì)事件進(jìn)行分類處理。
復(fù)制代碼 代碼如下:
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");//獲取當(dāng)前點(diǎn)擊button的自定義的屬性。
var value=target.value;//獲取當(dāng)前的值
var num=getScreen();//獲取當(dāng)前框的值
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'){//數(shù)字鍵
if(num==='0'||isReset){//有操作符或顯示屏為0
setScreen(value);
isReset=false;
return;
}
setScreen(num.toString().concat(value));
}
if(mark==="."){//小數(shù)點(diǎn)
var hasPoint=num.toString().indexOf(".")>-1;
if(hasPoint){
if(isReset){
setScreen("0"+value);
isReset=false;
return;
}
return;
}
setScreen(num.toString().concat(value));
}
if(mark==="+/-"){//正負(fù)號(hào)
setScreen(-num);
}
if(mark==="op"){//如果點(diǎn)擊的是操作符則設(shè)計(jì)第一個(gè)操作數(shù)
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"){//計(jì)算
if(!operation)return;
result=operateNum(result,num,operation);
setScreen(result);
operation=null;
isReset=false;
}
}
}
第三：全局變量的使用，利用全局變量對(duì)局部操作進(jìn)度進(jìn)行控制。（狀態(tài)控制）
復(fù)制代碼 代碼如下:
var result=0;//計(jì)算結(jié)果
var isReset=false;//是否重新設(shè)置
var operation;//操作符
第四：對(duì)頁面操作進(jìn)行分離，解耦合。
復(fù)制代碼 代碼如下:
//設(shè)置顯示屏的值
function setScreen(num){
calculate_outPut.value=num;
}
//獲取顯示屏的值
function getScreen(){
return calculate_outPut.value;
}
第五：過濾操作數(shù)，完成計(jì)算。
復(fù)制代碼 代碼如下:
//計(jì)算函數(shù)
var operateNum=function(num1,num2,op){
if(!(num1&&num2))return;
//保證num1,num2都為數(shù)字
num1=Number(num1);
num2=Number(num2);
//不存在操作符,返回num1;
if(!op)return num1;
//匹配運(yùn)算公式
if(!operateExp[op])return 0;
return operateExp[op](num1,num2);
}
PS：這里再為大家推薦兩款本站的在線計(jì)算器，都是采用js實(shí)現(xiàn)，且功能強(qiáng)大，相信對(duì)于大家深入了解JavaScript數(shù)學(xué)運(yùn)算及web設(shè)計(jì)會(huì)有所幫助：
在線標(biāo)準(zhǔn)計(jì)算器：http://tools.jb51.net/jisuanqi/jsq
在線科學(xué)計(jì)算器：http://tools.jb51.net/jisuanqi/jsqkexue
您可能感興趣的文章:
- javascript寫的簡(jiǎn)單的計(jì)算器，內(nèi)容很多，方法實(shí)用，推薦
- js實(shí)現(xiàn)簡(jiǎn)單計(jì)算器
- 簡(jiǎn)易js代碼實(shí)現(xiàn)計(jì)算器操作
- html+js實(shí)現(xiàn)簡(jiǎn)單的計(jì)算器代碼(加減乘除)
- js實(shí)現(xiàn)一個(gè)簡(jiǎn)易計(jì)算器
- 用JS寫的簡(jiǎn)單的計(jì)算器實(shí)現(xiàn)代碼
- 純javascript代碼實(shí)現(xiàn)計(jì)算器功能(三種方法)
- Vue.js實(shí)現(xiàn)的計(jì)算器功能完整示例
- js網(wǎng)頁版計(jì)算器的簡(jiǎn)單實(shí)現(xiàn)
- 基于JavaScript的簡(jiǎn)易計(jì)算器功能
相關(guān)文章
js如何根據(jù)class獲取元素并且點(diǎn)擊元素詳解
這篇文章主要給大家介紹了關(guān)于js如何根據(jù)class獲取元素并且點(diǎn)擊元素的相關(guān)資料,獲取元素集合的方法有很多,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-04-04
Google AJAX 搜索 API實(shí)現(xiàn)代碼
Google AJAX 搜索 API實(shí)現(xiàn)代碼，需要的朋友可以參考下。2010-11-11
這篇文章主要介紹了JavaScript函數(shù)IIFE使用詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10
在日常的前端開發(fā)工作中，我們會(huì)經(jīng)常的與HTML、javascript、css等語言打交道，和一門真正的語言一樣，計(jì)算機(jī)語言也有它的字母表、語法、詞法、編碼方式等2008-12-12
如何提升JavaScript執(zhí)行效率與性能在前端開發(fā)中位于一個(gè)很重要的地方，這節(jié)來研究下如何在平時(shí)做項(xiàng)目過程中，提升JavaScript性能與運(yùn)行效率,需要的朋友可以參考下2012-12-12
感謝網(wǎng)友“l(fā)iufabin”提出的關(guān)于不支持FF的問題，第一個(gè)在FF下經(jīng)過測(cè)試時(shí)支持的，第二個(gè)中的高度自適應(yīng)不支持，我在網(wǎng)上找了一個(gè)JQUERY的插件2009-05-05
處理JavaScript浮點(diǎn)數(shù)精度問題的解決方案
在開發(fā)過程中,特別是涉及到金額計(jì)算或需要精確比較的場(chǎng)景,浮點(diǎn)數(shù)精度問題是一個(gè)常見而重要的挑戰(zhàn),本文將介紹在JavaScript中如何識(shí)別、理解和解決這些問題,并提供一些實(shí)用的技巧和建議,需要的朋友可以參考下2024-06-06
js實(shí)現(xiàn)圖片和鏈接文字同步切換特效的方法
這篇文章主要介紹了js實(shí)現(xiàn)圖片和鏈接文字同步切換特效的方法,涉及javascript操作文字及圖片的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
這篇文章主要為大家介紹了big.js?如何解決精度丟失問題源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
js實(shí)現(xiàn)彩色條紋滾動(dòng)條效果
本文主要介紹了js實(shí)現(xiàn)彩色條紋滾動(dòng)條效果的實(shí)例。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03