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

一道笔试题

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

用HTML五、CSS三、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来开启电话号码的自动识别：

<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版本还存在一些问题：

1. 因为JS自己存在计算浮点数精度丢失问题，因此这个问题在项目中赞成存在，须要本身去处理这个问题

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

因此下个版本的开发计划为：

1. 解决浮点数计算精度问题

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

3. 使用面向对象方式重构APP

欢迎你们到github上来看看，若是喜欢能够star、watch一下，或提issue。