摘要:我這里更進一步修復了這個,想法很簡單我可以等你輸完再把非數字全替換掉,只要把方法的正則改成全局匹配就。頁面加載后累加,自加實現效果頁面加載后累加,自加第三題的變種,換成觸發變化而已。
0x1用typeof查看數據類型
略過,不過typeof用來判斷數據類型是不太靠譜的,尤其是涉及到引用類型的時候,除非是要檢測一個變量是否有定義,否則最好采用Object.prototype.toString方法。
0x2用parseInt解析數字,并求和實現效果:
3-02用parseInt解析數字,并求和
對這道題來說,用戶的輸入無法三種:數字、非數字、空字符(不輸入);而原題里的實現為防止用戶可謂是處心積慮,空字符直接彈窗、而非數字用keyup事件實現輸一個刪一個,用戶只能乖乖輸入數字了。但有個bug,按著按鈕不動是交替觸發keydown和keypress,這時輸一個刪一個的效果就沒用了。
我這里更進一步修復了這個bug,想法很簡單---我可以等你輸完再把非數字全替換掉,只要把replace方法的正則改成全局匹配就ok。不過尷尬的是,既然有了這個無死角防止輸入非數字的效果,還要parseInt干嘛。。。
0x3累加按鈕,自加1實現效果:
3-03累加按鈕,自加1
實現效果:
3-04輸入兩個數字,比較大小
第二題的變種,這次還是正常點,改用正則判斷,不用第二題那魔性的自動刪除字符了。
0x5頁面加載后累加,自加1實現效果:
3-05頁面加載后累加,自加1
第三題的變種,換成setInterval觸發變化而已。
0x6判斷數字是否為兩位數實現效果:
3-06判斷數字是否為兩位數
繼續正則判斷,這一期的題有點無聊啊。。
0x7網頁計算器實現效果:
3-07網頁計算器
這題算是比較綜合的題,所以相比前面的題目花了更多的時間,難點就是功能的實現。這里我的實現思路是比較簡單的:就是用一個緩存區顯示輸入,再用一個公式區用緩存的數據構造計算式,最后點擊等號時直接把計算式字符串用eval()執行輸出。
這樣一來這題就變成字符串處理了,在構造計算式時有很多分支情況,因為點擊數字、小數點和運算符得考慮上一步的輸入,一共有五種情況:運算符、數字、小數點、上一步的error、輸入溢出屏幕。窮舉出所有情況后,接下來就用正則判斷出這些分支,以及對這些分支的各自處理了。
如上所述,因為只是簡單粗暴的窮舉,所以js里寫了一堆if-else,感覺有點ugly⊙︿⊙。
除了js,還學到了一些新東西:比如文本框可以用readonly屬性設置只讀、用maxlength屬性限制輸入字符的個數(只能限制用戶輸入,如果像這題里直接修改文本框的value的話,這個限制是沒有卵用滴)。
再者,在按鈕樣式設計上,這里使用了sprite圖來做按鈕效果,相比用純css有更好的兼容性和可定制性;同時也了解到純色的背景圖片可以做得更小、要用時再平鋪開來,能有效提高網頁的性能。
08簡易網頁時鐘實現效果:
3-08簡易網頁時鐘
以一秒為周期獲取當前時間進行更新即可。要注意的是得輸出的時間字符串都必須為兩位,這里使用replace方法搭配正則進行格式化,由于正則本身就有判斷和篩選的作用,就不用再羅哩羅嗦地去判斷每個字符串的長度了,寫起來更加簡潔優雅。
09倒計時時鐘(100秒)實現效果:
3-09倒計時時鐘(100秒)
核心內容和上一題差不多,只是把計時改變的內容由實時的時間換成了遞減的秒數、再加上一個按鈕控制動作。為了封裝性更好,這里還用了一個單例對象來實現計時器,減少了無謂的全局變量。有了這個干凈的接口,代碼看起來清爽多了~
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/78993.html
摘要:模板語法使用了基于的模版語法,允許開發者聲明式地將綁定至底層實例的數據。的核心是一個允許你采用簡潔的模板語法來聲明式的將數據渲染進的系統。指令用于在表達式的值改變時,將某些行為應用到上。 Vue.js 模板語法 Vue.js 使用了基于 HTML 的模版語法,允許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。 Vue.js 的核心是一個允許你采用簡潔的模板語法來聲明式的將數...
摘要:大彬哥今天歲,家住在北京,工作是前端開發講師。另一個學生是趙日天,今年歲,家住在濟南,工作是碼農。默認值大彬哥我是我是大彬哥防止變量覆蓋你的庫庫里常用如有疑問加入和更多資料,群 對象 js對象我只想說三件事 1.js中的對象就是鍵值對,和java等語言的對象完全不一樣。 {name:leo,age:18} 2.鍵可以定義多次,值卻只能是最后一個。這個跟變量有點類似。 3.鍵值對里面還...
閱讀 2133·2021-11-19 09:58
閱讀 1719·2021-11-15 11:36
閱讀 2879·2019-08-30 15:54
閱讀 3399·2019-08-29 15:07
閱讀 2772·2019-08-26 11:47
閱讀 2825·2019-08-26 10:11
閱讀 2511·2019-08-23 18:22
閱讀 2759·2019-08-23 17:58