Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
一、開始吧,先做一個360*500的盒子。
二、加入輸入框,輸入框給它270寬,再配個灰色背景。
三、做18個div,我覺得這樣子比table標簽更直觀,其實你還是什么都看不見,因為字是黑色的,背景黑色的。
四、行了,我們給div加樣式吧。
五、我們讓這18個按鈕浮動,它們就不會獨占一行了,然后再讓它們外部上下左右距離為5px。
六、把按鍵做成圓的,里面的字居中,然后再把字變大。
七、把計算器的整體外觀也改改。
八、“=”和“0” 這兩個一個是加高,一個是加寬,我們得再加樣式區別對待。
九、我們讓等號按鈕右浮動就可以了。
十、對按鈕再修飾,做兩個樣式,一個是灰白色,一個是土黃色。
十一、對輸入框做個修飾,最終完成界面設計。
十二、我們整個js只用獲取一個元素對象,那就是input。
十三、做按鈕點擊事件,把大多數按鈕的點擊都寫進去,這里我特意用箭頭函數,當學習吧。
幾乎所有的按鈕都調用這個clickbt函數,唯有“=”號不用。
十四、該是為“=”加函數的時候了,這里用了eval(),能把字符串當算式運算出結果。
十五、總結,到此為止,整個計算器就做出來了,大家會發現js部分很簡單,因為我們只有一般的加減乘除計算,有更多想法的朋友,自己補充吧。
image
image
IntelliJ IDEA
image
image
完整代碼比較長,博客正文就不貼了,詳見下方鏈接。
https://gitee.com/hspbc/calculators
image
用十種編程語言開發計算器應用-第一篇-C語言
用十種編程語言開發計算器應用-第二篇-Java
用十種編程語言開發計算器應用-第三篇-Python
用十種編程語言開發計算器應用-第四篇-Kotlin
用十種編程語言開發計算器應用-第五篇-Flutter
用十種編程語言開發計算器應用-第六篇-iOS
廈門大學計算機專業|華為八年高級工程師
十年軟件開發經驗,5年編程培訓教學經驗
目前從事編程教學,軟件開發指導,軟件類畢業設計指導。
所有編程資料及開源項目見https://cxyxy.blog.csdn.net/article/details/120405881
了一個簡單的計算器例子。覺得實用的小伙伴可以看看如何實現該效果!
先上效果圖:
原理我相信大家都懂了。下面就直接進入代碼環節!
html:
css代碼就不提供了,按你個人喜好設置樣式即可,下面來看看JS代碼:
*請認真填寫需求信息,我們會在24小時內與您取得聯系。