|
一道笔试题
之前偶然看到一个机构的笔试题，题目如下：
用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;
//滑动事件
| 
发表于 2024-6-29 15:28:54
