整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          用div+css+js做一個簡單的計(jì)算器,只用幾行js,iphone計(jì)算器界面

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

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

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

          三、做18個div,我覺得這樣子比table標(biāo)簽更直觀,其實(shí)你還是什么都看不見,因?yàn)樽质呛谏模尘昂谏摹?/p>

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

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

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

          • 整體的樣子是有了。

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

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

          七、把計(jì)算器的整體外觀也改改。

          • 內(nèi)部距離20px,再加20px的圓角。

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

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

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

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

          十一、對輸入框做個修飾,最終完成界面設(shè)計(jì)。

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

          十三、做按鈕點(diǎn)擊事件,把大多數(shù)按鈕的點(diǎn)擊都寫進(jìn)去,這里我特意用箭頭函數(shù),當(dāng)學(xué)習(xí)吧。

          幾乎所有的按鈕都調(diào)用這個clickbt函數(shù),唯有“=”號不用。

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

          十五、總結(jié),到此為止,整個計(jì)算器就做出來了,大家會發(fā)現(xiàn)js部分很簡單,因?yàn)槲覀冎挥幸话愕募訙p乘除計(jì)算,有更多想法的朋友,自己補(bǔ)充吧。

          十種編程語言開發(fā)計(jì)算器應(yīng)用

          1. C語言
          2. C#(windows桌面軟件)
          3. Swift (ios應(yīng)用)
          4. python
          5. Dart(Flutter應(yīng)用,跨平臺,適用安卓、ios、mac、windows、web)
          6. Java(安卓App)
          7. Kotlin (安卓App)
          8. Js+Html+Vue(H5應(yīng)用)
          9. 微信小程序
          10. 抖音小程序

          image

          h5版

          image

          開發(fā)工具

          IntelliJ IDEA

          image

          工程截圖

          image

          關(guān)鍵代碼文件

          • index.html 界面及計(jì)算邏輯

          完整代碼比較長,博客正文就不貼了,詳見下方鏈接。

          完整源代碼

          https://gitee.com/hspbc/calculators

          image

          系列文章

          用十種編程語言開發(fā)計(jì)算器應(yīng)用-第一篇-C語言

          用十種編程語言開發(fā)計(jì)算器應(yīng)用-第二篇-Java

          用十種編程語言開發(fā)計(jì)算器應(yīng)用-第三篇-Python

          用十種編程語言開發(fā)計(jì)算器應(yīng)用-第四篇-Kotlin

          用十種編程語言開發(fā)計(jì)算器應(yīng)用-第五篇-Flutter

          用十種編程語言開發(fā)計(jì)算器應(yīng)用-第六篇-iOS



          關(guān)于我

          廈門大學(xué)計(jì)算機(jī)專業(yè)|華為八年高級工程師
          十年軟件開發(fā)經(jīng)驗(yàn),5年編程培訓(xùn)教學(xué)經(jīng)驗(yàn)
          目前從事編程教學(xué),軟件開發(fā)指導(dǎo),軟件類畢業(yè)設(shè)計(jì)指導(dǎo)。
          所有編程資料及開源項(xiàng)目見https://cxyxy.blog.csdn.net/article/details/120405881

          了一個簡單的計(jì)算器例子。覺得實(shí)用的小伙伴可以看看如何實(shí)現(xiàn)該效果!

          先上效果圖:

          原理我相信大家都懂了。下面就直接進(jìn)入代碼環(huán)節(jié)!

          html:

          css代碼就不提供了,按你個人喜好設(shè)置樣式即可,下面來看看JS代碼:


          主站蜘蛛池模板: 国产91精品一区| 最新中文字幕一区二区乱码| 久久一区二区明星换脸| 午夜视频在线观看一区| 亚洲AV无码一区二区二三区软件 | 人妻体内射精一区二区三区| 国产乱码精品一区二区三区四川| 91久久精品午夜一区二区| 国产一在线精品一区在线观看| 麻豆va一区二区三区久久浪| 色偷偷久久一区二区三区| 亚洲av午夜福利精品一区| 精品无码人妻一区二区三区不卡| 国产中文字幕一区| 日韩在线一区二区三区视频| av一区二区三区人妻少妇| 久久无码人妻一区二区三区| 久久精品一区二区免费看| 国产成人精品一区二区三区无码 | 国产乱子伦一区二区三区| 亚洲午夜精品一区二区麻豆| 中文字幕av一区| 麻豆AV无码精品一区二区| 国产福利一区二区三区在线观看 | 国产精品毛片a∨一区二区三区| 国产成人精品一区二区三在线观看| 国语对白一区二区三区| 日本香蕉一区二区三区| 视频一区二区三区免费观看| 变态调教一区二区三区| 日本丰满少妇一区二区三区| 国产91一区二区在线播放不卡| 国产精品被窝福利一区 | 亚洲欧美成人一区二区三区| 亚洲一区二区三区成人网站| 国产高清视频一区二区| 国产福利电影一区二区三区久久久久成人精品综合 | 亚洲国产美国国产综合一区二区| 日本不卡一区二区三区视频| 亚洲美女一区二区三区| 无码人妻精品一区二区三区久久久|