一、開始吧,先做一個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
者:咕隆先森
來源:Python 技術
前段時間剛接觸到前端網頁開發,但是對于剛入門的小白而言,像flask、Django等這類稍大型的框架確實不太適合,今天這個Dash是集眾家之長于一體的輕量化Web開發庫。
Dash 是一個用于構建基于 Web 的應用程序的 Python 庫,無需 JavaScript 。
Dash 同時也是用于創建分析 Web 應用程序的用戶界面庫。那些使用 Python 進行數據分析、數據挖掘、可視化、建模、儀器控制和報告的人可以立即使用 Dash 。
Dash 建立在 Plotly.js、React 和 Flask 之上,將現代 UI 元素(如下拉列表、滑塊和圖形)與你的分析 Python 代碼相結合。
提示:本文基于Windows 10、Anaconda 3、Sublime Text,Python版本為3.6.5 個人習慣單獨新一個用于dash開發的虛擬環境,創建命令:
conda create -n myenv_dash python==3.6.5
安裝Dash的第三方包:
pip install dash
因為是基于Flask,所以系統會自動安裝相應的依賴,這里我建議也安裝一個額外依賴:dash_bootstrap_components
pip install dash_bootstrap_components
此依賴包含Twitter的bootstrap組件。
from dash import Dash, html, dcc
from dash.dependencies import Input, Output
import dash_bootstrap_components as dbc
try:
# 獲取在線bootstrap.min.css
app = Dash(__name__, external_stylesheets = ['https://cdn.staticfile.org/twitter-bootstrap/4.5.2/css/bootstrap.min.css'])
print('此網頁渲染基于在線的CSS')
except:
# 獲取本地bootstrap.min.css
app = Dash(__name__, external_stylesheets = [r"E:\Desktop\My_Python\Dash\css\bootstrap.min.css"])
print('此網頁渲染基于本地的CSS')
app.title = '在線匯率計算器'
此處使用的css有在線的和本地的,利用try……except……防止在線的css文件無法加載而導致報錯。
代碼如下(示例):
# 輸出函數,對于重復使用的,定義函數更快捷
def item(name, img_path):
return dbc.ListGroupItem([html.H5(name), html.Img(src=img_path), html.H5('---', id=name, className='float-right')])
因為是單輸入,多輸出,構建item函數可以重復利用,優化代碼, 函數參數有貨幣名稱和國旗(提前準備好圖片素材,大小建議不要太大,我的圖片是160*110)。dbc.ListGroupItem組件可以很好的定位標簽、文字; 其中的className='float-right'可以理解為顯示樣式,代表“靠右浮動”
代碼如下(示例):
app.layout = dbc.Container(
children=[
dbc.ListGroup([
dbc.ListGroupItem(children=[
html.H1("匯率計算器-簡單版",style={'textAlign': 'center','color':'#272528'}),
html.P('輸入:用于兌換外幣的人民幣數;輸出:能兌換到的外幣數;單位:單位幣值。',style={'textAlign': 'center','color':'#BB002D'}),
dbc.Input(value = 0, id = 'input', type='number')
],active=True),
item('JPY','./assets/Japan.jpg'),
item('USD','./assets/USA.jpg'),
item('GBP','./assets/UK.jpg'),
item('HKD','./assets/Hongkong.jpg'),
item('EUR','./assets/EU.png'),
item('CHF','./assets/France.png'),
item('INR','./assets/India.jpg')
],className='shadow')
],style={'padding':'2rem'}
)
layout為GUI布局,采用列表的模式,根據行列進行排布;style={'textAlign': 'center','color':'#272528'}為文字排布樣式設定,為字典類型,可以設置字體,顏色等 dbc.Input(value = 0, id = 'input', type='number')默認value值為0,數據類型為number用于計算;style={'padding':'2rem'}為Container(容器)的居中顯示樣式,代表畫布距離邊界的寬度。
代碼如下(示例):
@app.callback(
output = [
Output('JPY', 'children'),
Output('USD', 'children'),
Output('GBP', 'children'),
Output('HKD', 'children'),
Output('EUR', 'children'),
Output('CHF', 'children'),
Output('INR', 'children')
],
inputs = [Input('input', 'value')]
)
def rule(rmb):
rmb = rmb if rmb is not None else 0
return (
f'{round(rmb/0.0501,2)} ¥',
f'{round(rmb/6.7646,2)} $',
f'{round(rmb/8.1682,2)} £',
f'{round(rmb/0.8615,2)} ¥',
f'{round(rmb/6.8881,2)} €',
f'{round(rmb/7.0309,2)} €',
f'{round(rmb/0.0852,2)} $'
)
@app.callback可以理解為裝飾器,用于網頁的交互。rule函數用于計算匯率。ps:這里的貨幣符號不一定全對,意思一些,不用太較真哈!!!
本項目到這里,整個項目就已經完成了,涉及到的一些基礎技能,還需要一點功力,好了,今天的分享就到這里,后續會更新如何使用requests爬蟲獲取實時匯率進行動態匯率換算。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。