jQuery實現乙個簡單的計算器

2022-08-28 22:03:19 字數 2860 閱讀 1797

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

1,**布局按鍵和區域:

乙個6行的**。第一和第二行分別是兩個type=「text」的,寬度佔據了四列的寬度,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的時間是最後輸入值和輸出值的實時顯示,真的有點不可思議。有可能是前面的部分功能已實現,沾沾自喜、盲目大意。乙個特別清醒的狀態做最後的完善真的很重要,這兩天雜事多,狀態不好。

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

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

善始善終,勉勵自己。

2023年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,運算符號+-*/啟用小鍵盤,感覺也不是很合理。

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

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

2023年5月23晚:

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

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

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

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

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

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

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

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

2023年5月24中午:

用正規表示式匹配輸入的計算式。

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

2,輸入的字串中先考慮篩選括號。從左到右匹配過程中,如果匹配到左括號按照先後順序則標註下來「l1」「l2」---「ln」,直到遇到右括號,標註為"rn",再繼續匹配到「r1」。如果再遇到左括號「l(n+1)」以此類推。如果匹配完後,左右個數不等,也認為輸入的表示式無效。匹配好的括號,從記憶體依次向外計算,直到退去括號。

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

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

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

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

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

2023年5月26日晚:

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

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

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

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

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

實現乙個jQuery的API

一.首先 var div div div.addclass red 可將所有 div 的 class 新增乙個 red div.settext hi 可將所有 div 的 textcontent 變為 hijquery本質上就是乙個建構函式,我們需要給它輸入引數,就可以返回對應引數的jquery例項...

實現乙個jquery的api

新增多個classname的函式 nodes.addclass function classes 定義乙個偽陣列,用來存要操作的節點 if nodeorselector string 如果傳的是字串,則用選擇器去查詢 如果傳入的值是節點,返回的nodes也寫成偽陣列的形式 nodes.addclas...

JQuery實現乙個簡單的滑鼠跟隨提示效果

效果體驗 實現思路 1 滑鼠移入標題 這裡是標籤 建立乙個div,div的內容為滑鼠位置的文字 將建立好的div加到文件中 為提示層設定位置 2 滑鼠移出標題 移除div 3 當滑鼠在標題內移動時 同樣新增div效果 上面是跟隨游標的,這個是居中的 1.htm 跟隨游標完整 如下 1 doctype...