JS基于遞歸實(shí)現(xiàn)網(wǎng)頁(yè)版計(jì)算器的方法分析
本文實(shí)例講述了JS基于遞歸實(shí)現(xiàn)網(wǎng)頁(yè)版計(jì)算器的方法。分享給大家供大家參考,具體如下:
遞歸實(shí)現(xiàn)網(wǎng)頁(yè)版計(jì)算器可以簡(jiǎn)化代碼,設(shè)計(jì)思路:
1、css+html實(shí)現(xiàn)計(jì)算器的外觀,給每個(gè)button綁定number(z)事件,傳入z的不同來(lái)區(qū)分觸發(fā)事件的按鈕。
<style>放入head中
這個(gè)div放在body中,是計(jì)算器的html,number()通過(guò)傳入不同的數(shù)字,區(qū)分觸發(fā)按鈕。
<div class="bg"> <div id="txt"></div> <button id="bt10" value="+">+</button> <button id="bt11" value="-">-</button> <button id="bt12" value="*">*</button> <br data-filtered="filtered"><button id="bt13" value="/">/</button> <button id="bt14" value="=">=</button> <br data-filtered="filtered"><button id="bt1" value="1">1</button> <button id="bt2" value="2">2</button> <button id="bt3" value="3">3</button> <br data-filtered="filtered"><button id="bt4" value="4">4</button> <button id="bt5" value="5">5</button> <button id="bt6" value="6">6</button> <br data-filtered="filtered"><button id="bt7" value="7">7</button> <button id="bt8" value="8">8</button> <button id="bt9" value="9">9</button> </div>
2、在number(z)方法中,利用DOM的innerHTML實(shí)現(xiàn)表達(dá)式的實(shí)時(shí)顯示,并用字符串content存儲(chǔ)已點(diǎn)擊的數(shù)字或符號(hào),當(dāng)點(diǎn)擊"="時(shí),調(diào)用fact(content)進(jìn)行計(jì)算。
代碼如下:
var content; //存儲(chǔ)已點(diǎn)擊的數(shù)字或符號(hào),要定義成全局的,如果定義在number()中,每次content都會(huì)被重新賦值
function number(z) {
var k=document.getElementById("txt");//獲取顯示框的 DOM,并緩存在k中
if(z==14){//如果點(diǎn)擊了"="號(hào)
var sum = fact(content);//調(diào)用fact()進(jìn)行計(jì)算,并把結(jié)果賦值給sum
content=content+"="+sum;//在要顯示的內(nèi)容后加入"="和sum
k.innerHTML = content;
content = null;//將content清空,準(zhǔn)備下次計(jì)算
}else{
//如果沒(méi)有點(diǎn)擊"="號(hào),而是點(diǎn)擊的運(yùn)算符,就需要通過(guò)switch把數(shù)字轉(zhuǎn)化成運(yùn)算符
switch(z){
case 10: z = '+'; break;
case 11: z = '-'; break;
case 12: z = '*'; break;
case 13: z = '/'; break;
}
//把此時(shí)輸入的字符存入content
if(content){
content+=z.toString();
}else{
content=z.toString();
}
k.innerHTML = content;//讓它實(shí)時(shí)顯示
}
}
3、本計(jì)算器中遞歸算法的思路:在fact(content)中,先用content.indexOf("+")判斷"+"號(hào)是否存在,若存在,則分別遞歸調(diào)用index前后的兩個(gè)字符串,并讓其相加,直到所有串中都找不到"+"后,開始用content.lastIndexOf("-")判斷"-"號(hào),后續(xù)操作和加號(hào)一樣,存在則遞歸index前后的兩個(gè)字符串,并讓其相減,直到找不到減號(hào),就開始判斷乘號(hào)和除號(hào),直到?jīng)]有符號(hào)后返回parseFloat(content),這里的content是遞歸調(diào)用后的無(wú)符號(hào)字符串,并不是最開始引入的參數(shù)了。
//實(shí)現(xiàn)遞歸計(jì)算
function fact(content){
var index = content.indexOf("+");//獲取"+"號(hào)的index
if(index != -1){
return fact(content.substring(0,index))+fact(content.substring(index+1));
//當(dāng)找得到“+”號(hào)時(shí),分成兩部分相加遞歸
}else{
var index2 = content.lastIndexOf("-");//當(dāng)找不到“+”號(hào)時(shí),開始找“-”號(hào)
if(index2 != -1){
return fact(content.substring(0,index2))-fact(content.substring(index2+1));
//當(dāng)找得到“-”號(hào)時(shí),分成兩部分相減遞歸
}else{
var index3 = content.indexOf("*");//當(dāng)找不到“-”號(hào)時(shí),開始找“*”號(hào)
if(index3 != -1){
return fact(content.substring(0,index3))*fact(content.substring(index3+1));
//當(dāng)找得到“*”號(hào)時(shí),分成兩部分相乘遞歸
}else{
var index4 = content.lastIndexOf("/");//當(dāng)找不到“*”號(hào)時(shí),開始找“/”號(hào)
if(index4 != -1){
return fact(content.substring(0,index4))/fact(content.substring(index4+1));
//當(dāng)找得到“/”號(hào)時(shí),分成兩部分相除遞歸
}else{
return parseFloat(content);//當(dāng)找不到“/”號(hào)時(shí),返回這段串的變成float型的數(shù)值
}
}
}
}
}
以上是全部代碼,設(shè)計(jì)思路中要注意的兩點(diǎn)是:
1、加號(hào)和乘號(hào)用的indexOf(),而減號(hào)和除號(hào)用的lastIndexOf()。
舉個(gè)例子:content="3-2-1"
它如果用indexOf(),先把串分成fact("3")-fact("2-1"),前面"3"無(wú)符號(hào),遞歸調(diào)用fact時(shí)返回parseFloat("3"),而后面的遞歸調(diào)用時(shí),會(huì)變成parseFloat("2")-parseFloat("1")=1,這個(gè)是fact("2-1")的返回值,最終結(jié)果是2,這就相當(dāng)于:3-(2-1)。
如果用lastIndexOf(),它把串分成fact("3-2")-fact("1"),fact("3-2")的返回值是parseFloat("3")-parseFloat("2")=1,這樣就實(shí)現(xiàn)了從左到右的計(jì)算。
除號(hào)也是同理:若content="6/3/2"用indexOf(),相當(dāng)于:6/(3/2),因?yàn)榧犹?hào)和乘號(hào)不存在順序問(wèn)題,因此可以用indexOf()。
2、乘除在判斷的內(nèi)層,加減在判斷的外層。
由于乘除要先計(jì)算,內(nèi)層的判斷會(huì)先獲得沒(méi)有符號(hào)的串,他們就會(huì)先計(jì)算。
這個(gè)計(jì)算器個(gè)人覺(jué)得可以優(yōu)化的地方:(大家也可以思考下)
1、給button綁定事件的時(shí)候,采用事件代理模式。
2、用到的哪些屬性或方法需要考慮瀏覽器兼容問(wèn)題。
本人最開始做的是非遞歸的兩個(gè)數(shù)加減乘除的計(jì)算器,后面改進(jìn)的時(shí)候,想做多個(gè)數(shù)的計(jì)算,思考起來(lái)就更復(fù)雜了。當(dāng)采用遞歸來(lái)寫,代碼量比之前小,易閱讀,并且思考起來(lái)不復(fù)雜。感興趣的可以試一試。
PS:這里再為大家推薦幾款計(jì)算工具供大家進(jìn)一步參考借鑒:
在線一元函數(shù)(方程)求解計(jì)算工具:
http://tools.jb51.net/jisuanqi/equ_jisuanqi
科學(xué)計(jì)算器在線使用_高級(jí)計(jì)算器在線計(jì)算:
http://tools.jb51.net/jisuanqi/jsqkexue
在線計(jì)算器_標(biāo)準(zhǔn)計(jì)算器:
http://tools.jb51.net/jisuanqi/jsq
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript數(shù)組操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript操作DOM技巧總結(jié)》及《JavaScript字符與字符串操作技巧總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- JavaScript獲取客戶端計(jì)算機(jī)硬件及系統(tǒng)等信息的方法
- JS獲取計(jì)算機(jī)mac地址以及IP的實(shí)現(xiàn)方法
- jsvascript圖像處理—(計(jì)算機(jī)視覺(jué)應(yīng)用)圖像金字塔
- 可以關(guān)閉計(jì)算機(jī)的js腳本
- Flex通過(guò)JS獲取客戶端IP和計(jì)算機(jī)名的實(shí)例代碼
- Vue.js計(jì)算機(jī)屬性computed和methods方法詳解
- 網(wǎng)頁(yè)計(jì)算器 一個(gè)JS計(jì)算器
- js網(wǎng)頁(yè)版計(jì)算器的簡(jiǎn)單實(shí)現(xiàn)
- 使用jsp調(diào)用javabean實(shí)現(xiàn)超簡(jiǎn)單網(wǎng)頁(yè)計(jì)算器示例
- JSP實(shí)現(xiàn)計(jì)算器功能(網(wǎng)頁(yè)版)
- JavaScript計(jì)算器網(wǎng)頁(yè)版實(shí)現(xiàn)代碼分享
- 使用JSP制作一個(gè)超簡(jiǎn)單的網(wǎng)頁(yè)計(jì)算器的實(shí)例分享
- node.js+express制作網(wǎng)頁(yè)計(jì)算器
- javascript實(shí)現(xiàn)簡(jiǎn)單的可隨機(jī)變色網(wǎng)頁(yè)計(jì)算器示例
- JS實(shí)現(xiàn)可針對(duì)算術(shù)表達(dá)式求值的計(jì)算器功能示例
- js表達(dá)式計(jì)算器代碼
- JS實(shí)現(xiàn)基本的網(wǎng)頁(yè)計(jì)算器功能示例
相關(guān)文章
一個(gè)簡(jiǎn)單的JS鼠標(biāo)懸停特效具體方法
這個(gè)特效最終實(shí)現(xiàn)效果就是當(dāng)鼠標(biāo)移動(dòng)到鏈接上,文字會(huì)橫向移動(dòng)一定距離,貌似總有人喜歡這些花花草草。添加此效果方法很簡(jiǎn)單。2013-06-06
javascript 自動(dòng)標(biāo)記來(lái)自搜索結(jié)果頁(yè)的關(guān)鍵字
使用javascript自動(dòng)標(biāo)記來(lái)自搜索結(jié)果頁(yè)的關(guān)鍵字的實(shí)現(xiàn)代碼。2010-01-01
JS碰撞運(yùn)動(dòng)實(shí)現(xiàn)方法詳解
這篇文章主要介紹了JS碰撞運(yùn)動(dòng)實(shí)現(xiàn)方法,詳細(xì)分析了碰撞運(yùn)動(dòng)的原理及相應(yīng)的javascript實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-12-12
JS中的JSON對(duì)象的定義和取值實(shí)現(xiàn)代碼
這篇文章主要介紹了JS中的JSON對(duì)象的定義和取值實(shí)現(xiàn)代碼,也是json的入門知識(shí),需要的朋友可以參考下2018-05-05
javascript實(shí)現(xiàn)的一個(gè)帶下拉框功能的文本框
這篇文章主要介紹了javascript實(shí)現(xiàn)的一個(gè)帶下拉框功能的文本框,需要的朋友可以參考下2014-05-05
JS獲取select-option-text_value的方法
這篇文章主要介紹了JS獲取select-option-text_value的方法,有需要的朋友可以參考一下2013-12-12
基于JavaScript實(shí)現(xiàn)下拉列表左右移動(dòng)代碼
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)下拉列表左右移動(dòng)效果,代碼簡(jiǎn)單易懂非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02
JS獲取CSS樣式(style/getComputedStyle/currentStyle)
這篇文章主要為大家介紹了JS獲取CSS樣式的方法,介紹了CSS樣式的三種分類情況,對(duì)獲取樣式做一個(gè)簡(jiǎn)單的封裝,感興趣的小伙伴們可以參考一下2016-01-01

