外链论坛

 找回密码
 立即注册
搜索
查看: 102|回复: 3

纯HTML+CSS+JavaScript编写的计算器应用

[复制链接]

3074

主题

148

回帖

9911万

积分

论坛元老

Rank: 8Rank: 8

积分
99118896
发表于 2024-6-29 15:28:54 | 显示全部楼层 |阅读模式

一道笔试题

之前偶然看到一个机构的笔试题,题目如下:

用HTML5、CSS3、JavaScript,做一个网页,实现如下图形式计算器

详细需求

有且仅有一个文件:index.html。不准许再有其他文件,不准许再有单独的CSS、JS、PNG、JPG文件。运行环境为 Google Chrome。必要支持标准的四则运算。例如:1+2*3=7。请在收到邮件的48小时内独立完成本测试,并回复本邮件。

一道笔试题诱发的一个练手项目

花了一点时间写好的第1版,符合了笔试题的需求。后来左看右看觉得还能够改进做的更好,于是给它持续的改进,加新功能等,这般下来没完没了,利用业余时间一点一点的写,从刚起始的网页版,到后来做响应式的移动版,再到此刻的移动App,短短续续大概写了3个月吧。

项目位置

最后版的计算器,项目位置和预览照片在GitHub:https://github.com/dunizb/sCalc

功能说明

最后版的功能如下:

界面布局采用CSS3 的 Flex box布局内置两套主题可切换计算历史记录表示左滑右滑可以切换单手模式(App)当输入手机号码后长按等于号能够拨打手机号码(App)版本更新检测(App)

界面布局

因为这个项目只是练手,因此采用了HTML5个CSS3技术,不打算兼容IE等低版本浏览器,因此直接运用CSS3供给的Flexbox布局方式。并且运用rem单位来进行自动计算尺寸。

计算计算历史记录表示功能,运用HTML5供给的本地存储功能之Local Storage,为了方便运用Local Storage,对它进行了简单的封装(见js/common.js文件)使之key值按必定规律生产,方便管理。

key由appName+id构成,id是自动增长不重复的,能够按id和appName删除一条记录,输入*则所有删除。

打包APP

移动Web版计算器写完后,又想把他做成APP在手机上运行,因为自己没用过混合APP诸如ionic之类的框架,因此参考了一下,选取了Hbuild来进行研发和APP的打包,非常方便。(HBuild).

单手模式

左滑右滑能够切换单手模式,这就必须移动端的touch事件了,运用如下代码判断是左滑还是又滑:
/** 单手模式 */ function singleModel(){ var calc = document.getElementById("calc"); var startX = 0,moveX = 0,distanceX = 0; var distance = 100; var width = calc.offsetWidth; //滑动事件




上一篇:看哭了,前端必看的8个HTML+CSS技巧,保藏起来吧!
下一篇:HTML+CSS+JS制作爱心表白代码 520情人节源码HTML 七夕情人节表白代码制作 生日祝福代码
回复

使用道具 举报

1

主题

754

回帖

-3

积分

限制会员

积分
-3
发表于 2024-8-20 12:05:53 | 显示全部楼层
感谢你的精彩评论,带给我新的思考角度。
回复

使用道具 举报

0

主题

1万

回帖

1

积分

新手上路

Rank: 1

积分
1
发表于 2024-8-23 06:55:23 | 显示全部楼层
祝福你、祝你幸福、早日实现等。
回复

使用道具 举报

3132

主题

3万

回帖

9996万

积分

论坛元老

Rank: 8Rank: 8

积分
99968646
发表于 2024-11-1 05:21:34 | 显示全部楼层
这篇文章真的让我受益匪浅,外链发布感谢分享!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

站点统计|Archiver|手机版|小黑屋|外链论坛 ( 非经营性网站 )|网站地图

GMT+8, 2024-11-22 23:41 , Processed in 0.984752 second(s), 39 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.