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

一道笔试题

之前有时看到一个公司的笔试题，题目以下：

用HTML5、CSS3、Javascript，做一个网页，完成以下图情势盘算器

具体要求：

1. 有且只要一个文件：index.html。不允许再有其他文件，不允许再有零丁的CSS、JS、PNG、JPG文件。

2. 运转环境为 Google Chrome。

3. 必需支撑规范的四则运算。比方：1+2*3=7。

4. 请在收到邮件的48小时内自力完本钱测试，并回复本邮件。

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

花了一点时候写好的初版，相符了笔试题的要求。厥后左看右看以为还能够革新做的更好，因而给它不停的革新，加新功用等，如许下来没完没了，应用业余时候一点一点的写，从刚开始的网页版，到厥后做相应式的挪动版，再到如今的挪动App，短短续续也许写了3个月吧。

项目地点

最终版的盘算器，项目地点和预览图片在 GitHub：https://github.com/dunizb/sCalc。

功用申明

最终版的功用以下：

1. 界面规划采纳CSS3 的 Flex box规划

2. 内置两套主题可切换

3. 盘算历史纪录显现

4. 左滑右滑能够切换单手形式(App)

5. 当输入手机号码后长按等于号能够拨打手机号码(App)

6. 版本更新搜检(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位数字，形如：13800138000

能够另有其他范例的数字也会被辨认。我们能够经由过程以下的meta来开启电话号码的自动辨认：

开启电话功用

123456

开启短信功用：

123456

然则，在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 = " 正在搜检新版本...";
},
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 = " 搜检新版本";
},
error:function(msg){
_this.innerHTML = " 搜检新版本";
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版本还存在一些题目：

1. 因为JS自身存在盘算浮点数精度丧失题目，所以这个题目在项目中赞同存在，须要本身去处置惩罚这个题目

2. 因为运用了第三方的天色接口，用了jquery.Ajax要领，所以违犯了运用纯原生写的初志。

所以下个版本的开辟设计为：

1. 处理浮点数盘算精度题目

2. 把猎取天色信息的jquery.Ajax要领替换为原生Javascript代码，本身封装JSONP要求函数

3. 运用面向对象体式格局重构APP

迎接人人到github上来看看，假如喜好能够star、watch一下，或提issue。