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

2019年8月31日 174次阅读 来源: dunizb

一道笔试题

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

用HTML5、CSS3、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值按肯定规律临盆，轻易治理。

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

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。

    原文作者：dunizb
    原文地址: https://segmentfault.com/a/1190000006977116
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞