jQuery實現一個簡單的計算器


現在是下午2點50分,眼睛和肩膀都有點酸,腦子有點木。

整理下做計算器的過程和結果:

1,表格布局按鍵和區域:

一個6行的表格。第一和第二行分別是兩個type=“text”的<input>,寬度占據了四列的寬度,colspan="4",分別是輸入和輸出的顯示行。第三行有兩列,分別是清零和退位按鍵。給每個按鍵標記id和value.

 

 

 

2,腳本寫的時候思路真的很重要,代碼的邏輯塊很凌亂,結構和可讀性差,進入狀態就得一會功夫啊。

  2.1按照按鍵分類:

    如果按下小數點,但輸入中已經包含了一個小數點時,此時按鍵無效;

    如果按下0,且之前無輸入值時,此時按鍵無效,如果還有按鍵0一直按下,則按鍵仍無效;

    如果輸入值的長度過大,則按鍵無效;

           如果按下小數點,但此前無輸入值或輸入值為0時,則存儲當前輸入值為"0.";

           如果按下0,且輸入值長度大於1時,則認為當前輸入有效,依次存儲到輸入值中;

    如果按下的1-9或.,則依次存儲到輸入中;

    如果按下運算符號+-*/,將輸入值轉化成浮點型存儲到number1中,並清空輸入值,將當前的運算符號存儲在mysi中;

    如果按下=,將輸入值轉化成浮點型存儲到number2中,並清空輸入值,按照已存儲的mysi的運算符號、number1,進行計算;

  2.2

          輸入值、輸出值的實時顯示。

     2.3 

         最后考慮清零鍵,退位鍵和輸入輸出建立關系,並完善。

3,多次測試,查bug。

   

結果:功能基本完成。

體會:2/3的時間是最后輸入值和輸出值的實時顯示,真的有點不可思議。有可能是前面的部分功能已實現,沾沾自喜、盲目大意。一個特別清醒的狀態做最后的完善真的很重要,這兩天雜事多,狀態不好。

      最初的邏輯框架清晰簡潔很重要,就像建築物的根基。根基太淺,負重過大,代碼很累贅。孔隙太小,塞磚頭的地方太少,房子空間太小,太局限了。

      最后的完善部分往往能畫龍點睛、錦上添花,但是這點我真的做的不好。

      善始善終,勉勵自己。

-------------------------------------------------------

2015年5月23下午:

收到一系列的修改意見

1,輸入框:校驗無效的輸入字符(漢字,字母等),限制輸入位數。

2,沒有a=?的運算

3,連續計算1+2+5=?

動態監聽輸入框輸入的值。

利用onkeydown去指示用戶按下按鍵后執行的代碼。

在這個事件屬性下,定義一個函數。event.keycode可以讀取當前鍵盤按下的keycode值。(keycode不同於ASCII)

keycode的一個按鍵(可能含多個符號)對應一個鍵碼值,那么問題來了:

問題1:鍵盤上“+”和“=”同時占用了一個按鍵,讀取鍵碼值后若經過keystring=string.fromcharcode(keycode)轉化為按鍵的鍵碼符號是取其中的哪一個?

問題2:鍵盤上又存在多個鍵“1”(大鍵盤)和“1”(小鍵盤),規定用戶兩個鍵都可輸入1還是怎么辦呢?

如果只用大鍵盤,其中“8”和“*”復用同一個鍵碼。不好辦!

如果大鍵盤啟用數字1-9,運算符號+-*/啟用小鍵盤,感覺也不是很合理。

如果大鍵盤中和小鍵盤的數字都可用,運算符號只能用啟用小鍵盤。

如果只用小鍵盤,應該也算合理。

----------------------------------------------------------------------------------------------

 2015年5月23晚:

動態監聽輸入框輸入值,我糾結了一個下午+吃飯的時間。

其實仔細想想onkeydown屬性明明就已經說的很明白了,一個鍵按下去檢測這個鍵。不可能用shift去復用,因為shift也是一個鍵。

甚至還想到shift+8后期處理正則表達式的時候再去從新定義,但這給用戶使用時帶來很多疑惑和不便。

只能說,我醉心於自己的腦洞了。

然則,動態監測鍵盤輸入oninput屬性和onpropertychange屬性。分別是非IE和IE下對當前值改變做出響應的腳本。

經過event.target.value或event.srcElement.value即可讀取當前輸入框的value。

啊哈,經過敲代碼驗證發現這個方法真的很靠譜,克服了onkeydown中只讀取一個單獨鍵碼的缺點。

既然已經可以讀取當前的輸入表達式,接下來的問題就是用正則表達式去分析數學表達式的問題了。

-----------------------------------------------------------------------------------------------------

 2015年5月24中午:

用正則表達式匹配輸入的計算式。

1,輸入的字符串中如果有包含0-9,小數點,+-*/,=和()以外的符號,就認為這個計算式是非法的。非法的計算式應該在用戶輸入的時候就給予提醒和限制,這和用戶在填寫表單時客戶端腳本驗證的情況應該是一樣的,所以,這里還需要完善一下。

2,輸入的字符串中先考慮篩選括號。從左到右匹配過程中,如果匹配到左括號按照先后順序則標注下來“L1”“L2”---“LN”,直到遇到右括號,標注為"RN",再繼續匹配到“R1”。如果再遇到左括號“L(N+1)”以此類推。如果匹配完后,左右個數不等,也認為輸入的表達式無效。匹配好的括號,從內存依次向外計算,直到退去括號。

3,退去括號的表達式匹配*/,並計算,直到所有*/都計算完。

4,表達式中只包含+-,依次計算得到最終結果。

這是我遇到問題時,最早的想法。可是,我又一次發現自己把問題想的太復雜了。

只要將字符串經過匹配轉化成計算式,計算機本身可以計算含括號的計算式。為什么老是把問題復雜化啊,讓我這種智商低的人悄悄地哭一會吧。

接下來我要做的就是把字符串匹配轉化成有效的計算表達式。好吧,現在去吃飯拿快遞回去睡覺吧。

-----------------------------------------------------------------------------------------

2015年5月26日晚:

現在的心情略有一點點興奮,剛剛自己測試完1.91版本,沒有發現bug.

站在不同的高度俯瞰全局確實是不同的思路。

第一個版本的計算器:界面上的按鍵輸入,不允許連續運算。

第二個版本的計算器:除了界面上的按鍵輸入,還可識別用戶用鍵盤在輸入框輸入的字符,不允許連續運算。

第三個版本的計算器:界面上按鍵輸入和用戶鍵盤輸入可交叉進行,並且允許連續計算。

 

    


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM