一道笔试题

之前偶然看到一个公司的笔试题，题目如下：

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

\具体要求：

有且只有一个文件：index.html。不允许再有其余文件，不允许再有单独的CSS、JS、PNG、JPG文件。

运行环境为 Google Chrome。

必需支持标准的四则运算。例如：1+2*3=7。

请在收到邮件的48小时内独立完成本测试，并回复本邮件。

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

花了一点时间写好的第一版，符合了笔试题的要求。后来左看右看觉得还可以改进做的更好，于是给它不断的改进，加新功能等，这样下来没完没了，利用业余时间一点一点的写，从刚开始的网页版，到后来做响应式的移动版，再到现在的移动App，短短续续大概写了3个月吧。大家在入门门]学习前台的过程当中有遇见任何关于学习，行业方面的问题，都可以申请加入我的前台学习扣扣裙，282549184。缺乏相关的基础教程也可以直接来找我要，我这里整理了-套最新的前台基础教程，学习前台的这个过程当中我也收集了很多前台学习手册，面试题，开发工具，PDF文档书籍教程，可以直接分享给你们。

项目地址 最终版的计算器，项目地址和预览图片在 GitHub： 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;

????//滑动事件

????calc.addEventListener("touchstart",function(e){

????????startX?=?e.touches[0].clientX;

????});

????calc.addEventListener("touchmove",function(e){

????????moveX?=?e.touches[0].clientX;

????????distanceX?=?moveX?-?startX;

????????isMove?=?true;

????});

????window.addEventListener("touchend",function(e){

????????if(Math.abs(distanceX)?>?width/3?&&?isMove){

????????????if(?distanceX?>?0?){

????????????????positionFun("right");????????//右滑

????????????}else{

????????????????positionFun("left");??????????//左滑

????????????}

????????}

????????startY?=?moveY?=?0;

????????isMove?=?false;

????});??

}

假如是左滑，就position:absolut;left:0,bottom:0，再把最外层DIV缩小到80%，这样就实现了左滑计算器缩小移动到左下角。右滑道理一样。

电话拨打功能

当输入手机号码后长按等于号可以拨打手机号码。这个功能没什么神奇，在移动Web上会对那些看起来像是电话号码的数字解决为电话链接，比方：

7位数字，形如：1234567

带括号及加号的数字，形如：(+86)123456789

双连接线的数字，形如：00-00-00111

11位数字，形如：1321233211

可能还有其余类型的数字也会被识别。我们可以通过如下的meta来开启电话号码的自动识别：

<meta?name="format-detection"?content="telephone=yes"?/>

开启电话功能

<a?href="tel:123456">123456</a>

开启短信功能：

<a?href="sms:123456">123456</a>

但是，在Android系统上，只能调用系统的拨号界面，在iOS上则能调过这一步直接把电话拨打出去。

版本升级检查

在关于页面，有一个版本升级检查按钮，就能检查能否有新版本，这个功能的原理是发送一个JSOPN请求去检查服务器上的JSON文件，比对版本号，假如服务器上的版本比APP的版本高则会提醒有新版本可以下载。

用户端JavaScript代码：

function?updateApp(){

????//检查新版本

????var?updateApp?=?document.getElementById("updateApp");

????updateApp.onclick?=?function(){

????????var?_this?=?this;

????????$.ajax({

????????????type:'get',

????????????url:'http://duni.sinaapp.com/demo/app.php?jsoncallback=?',

????????????dataType:'jsonp',

????????????beforeSend?:?function(){

????????????????_this.innerHTML?=?"<i class='iconfont updateAppIcon updateAppIconRotate'>?</i> 正在检查新版本...";

????????????},

????????????success:function(data){

????????????????var?newVer?=?data[0].version;

????????????????if(newVer?>?appConfig.version){

????????????????????var?log?=?data[0].log;

????????????????????var?downloadUrl?=?data[0].downloadUrl;

????????????????????if(confirm("检查到新版本【"+newVer+"】，能否立即下载？\n 升级日志：\n "?+?log)){

????????????????????????var?a?=?document.getElementById("telPhone");

????????????????????????a.href?=?downloadUrl;

????????????????????????a.target?=?"_blank";

????????????????????????a.click();

????????????????????}

????????????????}else{

????????????????????alert("你很潮哦，当前已经是最新版本！");

????????????????}

????????????????_this.innerHTML?=?"<i class='iconfont updateAppIcon'>?</i> 检查新版本";

????????????},

????????????error:function(msg){

????????????????_this.innerHTML?=?"<i class='iconfont updateAppIcon'>?</i> 检查新版本";

????????????????alert("检查失败："+msg.message);

????????????}

????????});

????}

}

服务端JSON：

[

????{

????????"version":"3.1.0",

????????"downloadUrl":"http://dunizb.b0.upaiyun.com/demo/app/myCalc-3.1.0.apk",

????????"hashCode":"20160812224616",

????????"log":"1.新添加切换主题功能 \n 2.新添加单手切换模式功能 \n 3.调整UI "

????}

]

下个版本计划

当前3.1.0版本还存在少量问题：

因为JS本身存在计算浮点数精度丢失问题，所以这个问题在项目中同意存在，需要自己去解决这个问题

因为使用了第三方的天气接口，用了jquery.Ajax方法，所以违反了使用纯原生写的初衷。

所以下个版本的开发计划为：

处理浮点数计算精度问题

把获取天气信息的jquery.Ajax方法替换为原生JavaScript代码，自己封装JSONP请求函数

使用面向对象方式重构APP