整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

用div+css+js做一个简单的计算器,只用几行js,iphone计算器界面

  • 于想做一个计算器了,少少几行js代码而已。
  • 网上有很多的html计算器的实例,大多是用table来做的,但我还是选择用div来做。
  • 这个计算器有基本的运算功能,但一些细的纠错,就没再细究了,极简嘛。
  • 更多文章,请关注我的头条号,我是落笔承冰。

一、开始吧,先做一个360*500的盒子。

二、加入输入框,输入框给它270宽,再配个灰色背景。

三、做18个div,我觉得这样子比table标签更直观,其实你还是什么都看不见,因为字是黑色的,背景黑色的。

四、行了,我们给div加样式吧。

  • 盒子天生独占一行,我们做一下修改让它摆得整齐些。

五、我们让这18个按钮浮动,它们就不会独占一行了,然后再让它们外部上下左右距离为5px。

  • 整体的样子是有了。

六、把按键做成圆的,里面的字居中,然后再把字变大。

  • 注释占了太多行,后面我就不写这么多了,特别是重复的。

七、把计算器的整体外观也改改。

  • 内部距离20px,再加20px的圆角。

八、“=”和“0” 这两个一个是加高,一个是加宽,我们得再加样式区别对待。

  • 按钮变长了,但是却空了一行。

九、我们让等号按钮右浮动就可以了。

十、对按钮再修饰,做两个样式,一个是灰白色,一个是土黄色。

十一、对输入框做个修饰,最终完成界面设计。

十二、我们整个js只用获取一个元素对象,那就是input。

十三、做按钮点击事件,把大多数按钮的点击都写进去,这里我特意用箭头函数,当学习吧。

几乎所有的按钮都调用这个clickbt函数,唯有“=”号不用。

十四、该是为“=”加函数的时候了,这里用了eval(),能把字符串当算式运算出结果。

十五、总结,到此为止,整个计算器就做出来了,大家会发现js部分很简单,因为我们只有一般的加减乘除计算,有更多想法的朋友,自己补充吧。

十种编程语言开发计算器应用

  1. C语言
  2. C#(windows桌面软件)
  3. Swift (ios应用)
  4. python
  5. Dart(Flutter应用,跨平台,适用安卓、ios、mac、windows、web)
  6. Java(安卓App)
  7. Kotlin (安卓App)
  8. Js+Html+Vue(H5应用)
  9. 微信小程序
  10. 抖音小程序

image

h5版

image

开发工具

IntelliJ IDEA

image

工程截图

image

关键代码文件

  • index.html 界面及计算逻辑

完整代码比较长,博客正文就不贴了,详见下方链接。

完整源代码

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是什么?

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

构建app

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'可以理解为显示样式,代表“靠右浮动”

网页结构Layout搭建

代码如下(示例):

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(容器)的居中显示样式,代表画布距离边界的宽度。

callback回调参数设定

代码如下(示例):

@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爬虫获取实时汇率进行动态汇率换算。