落到实处如下图方式总括器,1、完成原理

2019-11-26 17:26栏目:前端开发
TAG:

成效表达

最后版的功力如下:

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

图片 1

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

打包APP

运动Web版总计器写完后,又想把她做成应用程式在手提式有线电话机上运维,由于作者没用过混合APP诸如ionic之类的框架,所以参考了风流洒脱晃,接受了Hbuild来开展付出和APP的卷入,特别便利。(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.add伊芙ntListener("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 "
    }
]

HTML5单页面手势滑屏切换原理,html5页面手势原理

H5单页面手势滑屏切换是运用HTML5 触摸事件(Touch) 和 CSS3动漫片(Transform,Transition)来促成的,效果图如下所示,本文简单说一下其促成原理和首要性思路。
1、完结原理 生机勃勃经有5个页面,每一种页面占显示屏百分之百宽,则创建叁个DIV容器viewport,将其宽度(width) 设置为500%,然后将5个页面装入容器中,并让那5个页面平分整个容器,最终将容器的暗中认可地方设置为0,overflow设置为hidden,那样荧屏就暗中同意彰显第叁个页面。

XML/HTML Code复制内容到剪贴板

  1. <div id="viewport" class="viewport">    
  2. <div class="pageview" style="background: #3b76c0" >    
  3. <h3 >页面-1</h3>    
  4. </div>    
  5. <div class="pageview" style="background: #58c03b;">    
  6. <h3>页面-2</h3>    
  7. </div>    
  8. <div class="pageview" style="background: #c03b25;">    
  9. <h3>页面-3</h3>    
  10. </div>    
  11. <div class="pageview" style="background: #e0a718;">    
  12. <h3>页面-4</h3>    
  13. </div>    
  14. <div class="pageview" style="background: #c03eac;">    
  15. <h3>页面-5</h3>    
  16. </div>    
  17. </div>   

CSS样式:

XML/HTML Code复制内容到剪贴板

  1. .viewport{    
  2. width: 500%;    
  3. height: 100%;    
  4. display: -webkit-box;    
  5. overflow: hidden;    
  6. pointer-events: none;    
  7. -webkit-transform: translate3d(0,0,0);    
  8. backface-visibility: hidden;    
  9. position: relative;    
  10. }  

挂号touchstart,touchmove和touchend事件,当手指在显示器上海滑稽剧团动时,使用CSS3的transform来实时设置viewport的职位,譬如要来得第三个页面,就设置viewport的transform:translate3d(百分百,0,0) 就可以, 在这里间咱们应用translate3d来代替translateX,translate3d能够主动敞开手提式有线电话机GPU加快渲染,页面滑动更流畅。
2、首要思路
从指尖放在显示器上、滑动操作、再到间距显示器是两个完完全全的操作进度,对应的操作会触发如下事件:
手指放在荧屏上:ontouchstart
手指在显示器上海滑稽剧团动:ontouchmove
手指离开显示器:ontouchend
咱俩必要捕获触摸事件的那八个级次来成功页面包车型大巴滑动:
ontouchstart: 先导化变量, 记录手指所在的职位,记录当今天子

XML/HTML Code复制内容到剪贴板

  1. /*手指放在显示屏上*/    
  2. document.addEventListener("touchstart",function(e){    
  3. e.preventDefault();    
  4. var touch = e.touches[0];    
  5. startX = touch.pageX;    
  6. startY = touch.pageY;    
  7. initialPos = currentPosition; //此次滑动前的早先地方    
  8. viewport.style.webkitTransition = ""; //裁撤动漫作用    
  9. startT = new Date().getTime(); //记录手指按下的最初时间    
  10. isMove = false; //是或不是爆发滑动    
  11. }.bind(this),false);   

ontouchmove: 取安妥前所在地点,总计手指在屏幕上的移位差量deltaX,然后使页面跟随移动

XML/HTML Code复制内容到剪贴板

  1. /*手指在荧屏上海滑稽剧团动,页面跟随手指运动*/    
  2. document.addEventListener("touchmove",function(e){    
  3. e.preventDefault();    
  4. var touch = e.touches[0];    
  5. var deltaX = touch.pageX - startX;    
  6. var deltaY = touch.pageY - startY;    
  7. //假若X方向上的位移大于Y方向,则认为是反正滑动    
  8. if (Math.abs(deltaX) > Math.abs(deltaY)){    
  9. moveLength = deltaX;    
  10. var translate = initialPos + deltaX; //当前急需活动到的地点    
  11. //假若translate>0 或 < maxWidth,则意味页面超过边界    
  12. if (translate <=0 && translate >= maxWidth){    
  13. //移动页面    
  14. this.transform.call(viewport,translate);    
  15. isMove = true;    
  16. }    
  17. direction = deltaX>0?"right":"left"; //判别手指滑动的矛头    
  18. }    
  19. }.bind(this),false);   

ontouchend:手指离开显示器时,总结荧屏最终停留在哪大器晚成页。首先总结手指在显示屏上的停留时间deltaT,假若deltaT<300ms,则以为是连忙滑动,相反则是慢速度滑冰动,火速度滑冰动和慢速度滑冰动的处理是例外的:
(1)假如是火速度滑冰动,则让日前页面完整的停留在荧屏主旨(须求总结当前页面还会有多少须求滑动)
(2)若是是慢速度滑冰动,还亟需看清手指在荧屏上海滑稽剧团动的相距,假设滑动的相距未有超过显示屏宽度二分之一,则要回落到上生机勃勃页,相反则要停留在这里时此刻页面

XML/HTML Code复制内容到剪贴板

  1. /*手指离开荧屏时,总结最终须要逗留在哪生机勃勃页*/    
  2. document.addEventListener("touchend",function(e){    
  3. e.preventDefault();    
  4. var translate = 0;    
  5. //总计手指在显示屏上驻留的岁月    
  6. var deltaT = new Date().getTime() - startT;    
  7. if (isMove){ //爆发了左右滑行    
  8. //使用动漫片过渡让页面滑动到结尾的地点    
  9. viewport.style.webkitTransition = "0.3s ease -webkit-transform";    
  10. if(deltaT < 300){ //假使停留时间小于300ms,则感觉是神速滑动,无论滑动间隔是有一点点,都停留到下大器晚成页    
  11. translate = direction == 'left'?    
  12. currentPosition-(pageWidth+moveLength):currentPosition+pageWidth-moveLength;    
  13. //假如最终地方超越界限地方,则停留在边界地点    
  14. translatetranslate = translate > 0 ? 0 : translate; //左边界    
  15. translatetranslate = translate < maxWidth ? maxWidth : translate; //右边界    
  16. }else {    
  17. //借使滑动间距小于显示屏的一半,则退回到上意气风发页    
  18. if (Math.abs(moveLength)/pageWidth < 0.5){    
  19. translate = currentPosition-moveLength;    
  20. }else{    
  21. //假使滑动间距超越显示器的八分之四,则滑动到下生机勃勃页    
  22. translate = direction == 'left'?    
  23. currentPosition-(pageWidth+moveLength):currentPosition+pageWidth-moveLength;    
  24. translatetranslate = translate > 0 ? 0 : translate;    
  25. translatetranslate = translate < maxWidth ? maxWidth : translate;    
  26. }    
  27. }    
  28. //实行滑动,让页面完整的来获得显示屏上    
  29. this.transform.call(viewport,translate);    
  30. }    
  31. }.bind(this),false);   

除开,还要总括当前页面是第几页,并安装当前页码

XML/HTML Code复制内容到剪贴板

  1. //总计当前的页码    
  2. pageNow = Math.round(Math.abs(translate) / pageWidth) + 1;    
  3. setTimeout(function(){    
  4. //设置页码,DOM操作须要停放子线程中,不然会产出卡顿    
  5. this.setPageNow();    
  6. }.bind(this),100);   

主导的思绪就那么些,当然在实操进度中还会有大器晚成部分细节须求注意,这里就不详细说了,都在代码里能展现出来。关于HTML5单页面手势滑屏切换原理 我就给我们介绍这么多,希望对大家持有助于!

H5单页面手势滑屏切换是运用HTML5 触摸事件(Touch) 和 CSS3动漫片(Transform,Transition)来贯彻的,效...

风姿浪漫道笔试题

前边有的时候见到二个集团的笔试题,标题如下:

用HTML5、CSS3、JavaScript,做八个网页,达成如下图方式总结器

图片 2

现实需要:

  1. 有且独有三个文件:index.html。不允许再有任何文件,不容许再有单独的CSS、JS、PNG、JPG文件。
  2. 运营条件为 谷歌(Google卡塔尔 Chrome。
  3. 非得帮忙标准的四则运算。比如:1+2*3=7。
  4. 请在摄取邮件的48钟头内独立完花费测量检验,并回复本邮件。

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

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

原稿出处: dunizb   

下个本子安插

脚下3.1.0本子还设有点难题:

  1. 出于JS自己存在计量浮点数精度遗失难题,所以这些标题在类型中允许存在,要求本身去管理这一个难题
  2. 由于应用了第三方的天气接口,用了jquery.Ajax方法,所以违背了动用纯原生写的初志。

据此下个本子的开采安排为:

  1. 缓慢解决浮点数总计精度难点
  2. 把拿到气候音讯的jquery.Ajax方法替换为原生JavaScript代码,自身封装JSONP央浼函数
  3. 行使面向对象形式重构应用软件

招待大家到github上来走访,假使喜欢可以star、watch一下,或提issue。

4 赞 21 收藏 2 评论

图片 3

品种地址

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

生龙活虎道笔试题引发的二个练手项目

花了一些时间写好的首先版,相符了笔试题的供给。后来左看右看认为还足以校勘做的越来越好,于是给它不仅仅的改进,加新效能等,那样下去软磨硬泡,利用业余时间一点一点的写,从刚初步的网页版,到新兴做响应式的移动版,再到今后的移动App,短短续续大概写了三个月啊。

版权声明:本文由大奖888-www.88pt88.com-大奖888官网登录发布于前端开发,转载请注明出处:落到实处如下图方式总括器,1、完成原理