整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          入門|15分鐘用JS做一個簡易計算器

          這個小練手旨在幫助剛上手學習JavaScript的同學練習最基本的Js知識,大神勿噴哈,由于這個是非常簡易的計算器,可以完成的功能有加減乘除和AC(清屏),DEL(退格)等基本運算,所以代碼也不復雜,我會先放出代碼,然后再講解我的思路,非常簡單,只要你按照我的思路走,15分鐘不到我保證你也可以敲出同樣的代碼,當然主要還是希望可以為入門的同學提供一種解決問題的思路,各位看完后可以自己動手敲一遍哈。

          HTML代碼部分

          HTML這部分非常簡單,沒什么多說的,整個框架我利用<table>搭建的,需要注意的是,由于計算器屏幕不可輸入,我設置為了disabled。

          CSS代碼部分

          CSS也是簡單設定了一下寬高,我是在火狐瀏覽器上運行的,由于我沒使用百分比來設置寬高,在其他瀏覽器上樣式會發生一定程度上的改變,不過不影響功能就是了。

          JavaScript部分

          請先不要直接看這部分代碼,先看我的思路講解再看這部分,你絕對可以輕松理解

          思路講解

          請先不要看上面的JS代碼,接下來請試著跟著我的思路走,完成這個計算器的功能,我是分成三個部分來解決的,第一部分是將除了AC,DEL這兩個鍵之外的按鍵值獲取到屏幕上,第二部分是計算屏幕上的表達式的值,第三部分是添加AC(清屏),DEL(退格)功能,檢查BUG。

          • 第一部分:獲取值到屏幕上

          我認為解決簡單的JS問題大體都可以分三步:

          • 1.獲取你想操作的元素;

          • 2.保存你想操作的元素;

          • 3.對元素進行(遍歷)操作;

          我的第一步目的是將除了AC,DEL這兩個鍵之外的按鍵值獲取到屏幕上,那么我首先得獲取按鈕元素以及屏幕元素并將它們保存在btn_txt和txt變量里:

          獲取并保存了想操作的元素,接下來就對他們添加操作:

          在進行操作的之前請等一下,我們思考一下,btn_txt數組里存放著0,1,2,3,4,5,6,7,8,9," . "," + "," - "," * "," \ "," = "等一系列東西,我們當然要對數字和計算符號進行分開操作,所以我們用If……else……來判斷一下

          OK,我們接下來先考慮用戶輸入的是數字或者點的情況,首先數字可以連續輸入到屏幕里,但是小數點不應該能連續輸入到屏幕里,小數點應該只有一個才對,所以我們應該先加一個判斷條件:屏幕里是否有小數點存在?如果屏幕里已經有小數點存在,那么我只允許你再輸入數字,否則屏幕值不會接收,即是如下代碼:

          好了,用戶輸入的是數字或者點的情況已經考慮結束了,現在考慮用戶輸入的是運算符號的情況!這種情況也分兩部分,一種是用戶按了等號,一種是按了除等號之外的其他加減乘除運算符號,因為等號比較特殊一點,按了就直接應該得出結果了,所以要區用if……else……分開。我這樣的思路你可以理解吧!

          還有一個事情我們要考慮的是,我希望在我按下加減乘除運算符號時可以清屏,這樣我就可以繼續鍵入下一數字了(舉例:我按下數字“5”,再按下運算符“ + ”,按下瞬間屏幕清屏,然后我再鍵入數字“3”,最后按下“ = ”,最后得出結果“2”),但是清屏我并不想讓我的數據丟失,所以此時我先新建一個數組來保存這些數據(這里的“數據”指數字和運算符,也叫“表達式”),然后再清屏!具體代碼如下:

          • 第二部分:計算屏幕上的表達式的值

          好了下面我們討論用戶按下等號鍵的情況,這種比較簡單,直接對表達式(表達式就是我們之前輸入的數字與符號組合)進行計算就可以啦,需要注意的是計算完成之后要把保存表達式的數組way_res清空,因為本次運算完滿結束了,如果不清空里面的數據會影響下一次正常計算;

          • 第三部分:添加AC,DEL功能,檢查BUG

          首先,獲取清空按鈕和退格按鈕,然后把它們保存在btn_way變量下;

          然后就遍歷進行添加功能,這里同樣需要一個if……else……語句來判斷用戶按的是AC按鈕還是DEL按鈕

          到這里為止,所有功能基本上全部添加完畢,然后我們進行調試,發現一個問題,就是當我們第一次按鍵就按小數點“ . ”時,這時用戶的本意應為“ 0. ”,意即用戶是想輸入小數的,但是懶得按“0”,直接按了小數點,所以我們應該加一個判斷條件來幫助用戶,直接按小數點成為有意義的行為,代碼如下:

          好了,最后再加上window.onload = function(){},代碼,到這里就全部結束了;大家有不理解的地方歡迎在評論里問我;

          再放一遍JavaScript全代碼

          • 于想做一個計算器了,少少幾行js代碼而已。
          • 網上有很多的html計算器的實例,大多是用table來做的,但我還是選擇用div來做。
          • 這個計算器有基本的運算功能,但一些細的糾錯,就沒再細究了,極簡嘛。
          • 更多文章,請關注我的頭條號,我是落筆承冰。

          一、開始吧,先做一個360*500的盒子。

          二、加入輸入框,輸入框給它270寬,再配個灰色背景。

          三、做18個div,我覺得這樣子比table標簽更直觀,其實你還是什么都看不見,因為字是黑色的,背景黑色的。

          四、行了,我們給div加樣式吧。

          • 盒子天生獨占一行,我們做一下修改讓它擺得整齊些。

          五、我們讓這18個按鈕浮動,它們就不會獨占一行了,然后再讓它們外部上下左右距離為5px。

          • 整體的樣子是有了。

          六、把按鍵做成圓的,里面的字居中,然后再把字變大。

          • 注釋占了太多行,后面我就不寫這么多了,特別是重復的。

          七、把計算器的整體外觀也改改。

          • 內部距離20px,再加20px的圓角。

          八、“=”和“0” 這兩個一個是加高,一個是加寬,我們得再加樣式區別對待。

          • 按鈕變長了,但是卻空了一行。

          九、我們讓等號按鈕右浮動就可以了。

          十、對按鈕再修飾,做兩個樣式,一個是灰白色,一個是土黃色。

          十一、對輸入框做個修飾,最終完成界面設計。

          十二、我們整個js只用獲取一個元素對象,那就是input。

          十三、做按鈕點擊事件,把大多數按鈕的點擊都寫進去,這里我特意用箭頭函數,當學習吧。

          幾乎所有的按鈕都調用這個clickbt函數,唯有“=”號不用。

          十四、該是為“=”加函數的時候了,這里用了eval(),能把字符串當算式運算出結果。

          十五、總結,到此為止,整個計算器就做出來了,大家會發現js部分很簡單,因為我們只有一般的加減乘除計算,有更多想法的朋友,自己補充吧。

          學視頻稍后補上

          <script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

          使用html和css 復刻圖片計算器的UI

          注意右邊是html css 實現的UI

          如果是新人,請觀看之前的視頻講解 : 跟浩哥學編程 做一個簡單的計算器 (一)(二)(三)(四)

          先介紹一個web開發學習的火箭助推器

          https://thimble.mozilla.org/zh-CN/ 或者 https://codepen.io/ 可在線編輯及時預覽。打開網站就開始,不用下載不用安裝。而且上邊有無數精美源碼可在線翻看。

          在線編寫代碼 并且及時預覽

          想要源碼的請點贊,評論留言,我會私信你源碼,多謝多謝。鼓勵一下原創。


          上一篇:HTML 實例
          下一篇:HTML和CSS編碼規范
          主站蜘蛛池模板: 国产主播一区二区三区在线观看| 日韩内射美女人妻一区二区三区| 四虎一区二区成人免费影院网址| 99精品国产一区二区三区| 日本中文一区二区三区亚洲| 国产色综合一区二区三区| 无码日韩精品一区二区免费| 香蕉在线精品一区二区| 国产一区高清视频| 麻豆AV无码精品一区二区| 亚洲一区二区三区电影| 不卡一区二区在线| 亚洲国产综合无码一区二区二三区| 女人18毛片a级毛片一区二区| 国产精品无码亚洲一区二区三区| 丰满爆乳一区二区三区| 亚洲国产精品一区二区第四页| 精品日韩一区二区| 精品国产福利在线观看一区| 亚洲一区二区三区高清视频| 91成人爽a毛片一区二区| 无码av免费一区二区三区试看 | 无码国产精成人午夜视频一区二区| 后入内射国产一区二区| 色一情一乱一伦一区二区三区日本| 日韩精品国产一区| 武侠古典一区二区三区中文| 国产suv精品一区二区6| 欧洲精品码一区二区三区免费看| 波多野结衣精品一区二区三区| 精品人妻一区二区三区四区在线 | 中文字幕一区日韩精品| 亚洲av无码一区二区三区观看| 亚洲av乱码一区二区三区| 97久久精品无码一区二区 | 怡红院一区二区三区| 在线一区二区观看| 一区二区三区无码高清视频| 波多野结衣高清一区二区三区| 最美女人体内射精一区二区| 无码人妻精品一区二区三区东京热 |