当前位置: 永利皇宫463手机版 > Web前端 > 正文

编排的总括器应用

时间:2019-10-06 20:01来源:Web前端
纯 HTML+CSS+JavaScript 编写的总括器应用 2016/09/26 · CSS,HTML5,JavaScript · 2评论 ·计算器 初稿出处: dunizb    一道笔试题 在此之前临时看见贰个厂家的笔试题,标题如下: 用HTML5、CSS3、Jav

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

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

初稿出处: dunizb   

一道笔试题

在此之前临时看见贰个厂家的笔试题,标题如下:

用HTML5、CSS3、JavaScript,做多个网页,完成如下图格局计算器

图片 1

现实须要:

  1. 有且独有叁个文本:index.html。不相同意再有别的文件,不允许再有单独的CSS、JS、PNG、JPG文件。
  2. 运行条件为 谷歌 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诸如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){ 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文件,比对版本号,假若服务器上的本子比应用程式的本子高则会提示有新本子能够下载。

客户端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); } }); } }

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. 运用面向对象方式重构APP

招待我们到github上来看看,假若喜欢能够star、watch一下,或提issue。

4 赞 21 收藏 2 评论

图片 3

编辑:Web前端 本文来源:编排的总括器应用

关键词: