您的位置:澳门新葡8455最新网站 > Web前端 > 编排的总括器应用

编排的总括器应用

发布时间:2019-12-09 15:19编辑:Web前端浏览(87)

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

    2016/09/26 · CSS, HTML5, JavaScript · 2 评论 · 计算器

    最初的稿件出处: dunizb   

    生龙活虎道笔试题

    事情未发生前有的时候看见八个集团的笔试题,标题如下:

    用HTML5、CSS3、JavaScript,做四个网页,实现如下图方式计算器

    图片 1

    切切实实必要:

    1. 有且唯有一个文本:index.html。区别意再有此外文件,不许再有独立的CSS、JS、PNG、JPG文件。
    2. 运行境况为 Google Chrome。
    3. 必得协理标准的四则运算。比方:1+2*3=7。
    4. 请在采纳邮件的48钟头内独立完费用测量试验,并回复本邮件。

    风姿浪漫道笔试题引发的五个练手项目

    花了有个别光阴写好的第意气风发版,符合了笔试题的渴求。后来左看右看以为还能改善做的更加好,于是给它不唯有的改善,加新作用等,那样下去穷追猛打,利用业余时间一点一点的写,从刚发轫的网页版,到后来做响应式的移动版,再到现行反革命的移动App,短短续续大概写了四个月啊。

    类型地址

    最后版的计算器,项目地址和预览图片在 GitHub:。

    职能表达

    最后版的效应如下:

    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值按一定规律临蓐,方便管理。

    图片 2

    key由appName+id组成,id是机动拉长不另行的,能够按id和appName删除一条记下,输入*则整个去除。

    打包APP

    移动Web版总结器写完后,又想把他做成APP在手提式有线电电话机上运转,由于本身没用过混合APP诸如ionic之类的框架,所以参谋了一下,选拔了Hbuild来扩充付出和应用软件的包装,非常常有助于。(HBuild).

    双网店模特式

    左滑右滑能够切换单脚情势,那就须求活动端的touch事件了,使用如下代码推断是左滑照旧又滑:

    JavaScript

    /** 双臂格局 */ 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卡塔尔(英语:State of Qatar){ 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; }); }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    /** 单手模式 */
    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缩短到十分之九,那样就贯彻了左滑总括器裁减移动到左下角。右滑道理相通。

    电话机拨打效率

    当输动手提式有线电话机号码后长按也正是号能够拨打手提式有线电话机号码。那些功用没什么神奇,在活动Web上会对这些看起来像是电话号码的数字管理为电话链接,举个例子:

    • 7位数字,形如:1234567
    • 带括号及加号的数字,形如:(+86卡塔尔(قطر‎123456789
    • 双连接线的数字,形如:00-00-00111
    • 11位数字,形如:13800138000

    兴许还应该有此外项目标数字也会被辨认。大家得以由此如下的meta来张开电话号码的自动识别:

    XHTML

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

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

    张开电话职能

    XHTML

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

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

    拉开短信效能:

    XHTML

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

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

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

    本子更新检查

    在关于页面,有三个版本更新检查按键,就会检查是或不是有新本子,那么些效果的规律是殡葬一个JSOPN央浼去反省服务器上的JSON文件,比对版本号,即使服务器上的版本比APP的版本高则会提示有新本子能够下载。

    客户端JavaScript代码:

    JavaScript

    function updateApp(卡塔尔{ //检查新本子 var updateApp = document.getElementById("updateApp"卡塔尔; updateApp.onclick = function(卡塔尔(قطر‎{ var _this = this; $.ajax({ type:'get', url:'', 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卡塔尔(英语:State of Qatar); } }卡塔尔(قطر‎; } }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    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:

    JavaScript

    [ { "version":"3.1.0", "downloadUrl":"", "hashCode":"二零一五0812224616", "log":"1.新添切换大旨成效 n 2.新添单臂切换情势成效 n 3.调整UI " } ]

    1
    2
    3
    4
    5
    6
    7
    8
    [
        {
            "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. 使用面向对象格局重构应用软件

    款待大家到github上来探访,倘若心仪能够star、watch一下,或提issue。

    4 赞 21 收藏 2 评论

    图片 3

    本文由澳门新葡8455最新网站发布于Web前端,转载请注明出处:编排的总括器应用

    关键词: