HTML伍达成显示器手势解锁

HTML5得以落成显示器手势解锁

2015/07/18 · HTML5 · 1
评论
·
手势解锁

原来的文章出处:
AlloyTeam   

职能浮现

图片 1

达成原理 利用HTML五的canvas,将解锁的范围划出,利用touch事件解锁那几个层面,直接看代码。

JavaScript

function createCircle() {//
创设解锁点的坐标,依据canvas的分寸来平均分配半径 var n = chooseType;//
画出n*n的矩阵 lastPoint = []; arr = []; restPoint = []; r =
ctx.canvas.width / (2 + 4 * n);// 公式总括 半径和canvas的大小有关 for
(var i = 0 ; i < n ; i++) { for (var j = 0 ; j < n ; j++) {
arr.push({ x: j * 4 * r + 3 * r, y: i * 4 * r + 3 * r });
restPoint.push({ x: j * 4 * r + 3 * r, y: i * 4 * r + 3 * r }); }
} //return arr; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function createCircle() {// 创建解锁点的坐标,根据canvas的大小来平均分配半径
 
        var n = chooseType;// 画出n*n的矩阵
        lastPoint = [];
        arr = [];
        restPoint = [];
        r = ctx.canvas.width / (2 + 4 * n);// 公式计算 半径和canvas的大小有关
        for (var i = 0 ; i < n ; i++) {
            for (var j = 0 ; j < n ; j++) {
                arr.push({
                    x: j * 4 * r + 3 * r,
                    y: i * 4 * r + 3 * r
                });
                restPoint.push({
                    x: j * 4 * r + 3 * r,
                    y: i * 4 * r + 3 * r
                });
            }
        }
        //return arr;
    }

canvas里的圆形画好之后方可举办事件绑定

JavaScript

function bindEvent() { can.addEventListener(“touchstart”, function (e) {
var po = getPosition(e); console.log(po); for (var i = 0 ; i <
arr.length ; i++) { if (Math.abs(po.x – arr[i].x) < r &&
Math.abs(po.y – arr[i].y) < r) { // 用来判别初始点是或不是在规模内部
touchFlag = true; drawPoint(arr[i].x,arr[i].y);
lastPoint.push(arr[i]); restPoint.splice(i,1); break; } } }, false);
can.addEventListener(“touchmove”, function (e) { if (touchFlag) {
update(getPosition(e)); } }, false); can.addEventListener(“touchend”,
function (e) { if (touchFlag) { touchFlag = false; storePass(lastPoint);
setTimeout(function(){ init(); }, 300); } }, 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
28
29
30
31
32
function bindEvent() {
        can.addEventListener("touchstart", function (e) {
             var po = getPosition(e);
             console.log(po);
             for (var i = 0 ; i < arr.length ; i++) {
                if (Math.abs(po.x – arr[i].x) < r && Math.abs(po.y – arr[i].y) < r) { // 用来判断起始点是否在圈圈内部
 
                    touchFlag = true;
                    drawPoint(arr[i].x,arr[i].y);
                    lastPoint.push(arr[i]);
                    restPoint.splice(i,1);
                    break;
                }
             }
         }, false);
         can.addEventListener("touchmove", function (e) {
            if (touchFlag) {
                update(getPosition(e));
            }
         }, false);
         can.addEventListener("touchend", function (e) {
             if (touchFlag) {
                 touchFlag = false;
                 storePass(lastPoint);
                 setTimeout(function(){
 
                    init();
                }, 300);
             }
 
         }, false);
    }

紧接着到了最关键的步子绘制解锁路线逻辑,通过touchmove事件的持续触发,调用canvas的moveTo方法和lineTo方法来画出折现,同时推断是还是不是到达大家所画的框框里面,在那之中lastPoint保存不易的局面路线,restPoint保存全部局面去除正确路径之后剩余的。
Update方法:

JavaScript

function update(po) {// 大旨转移形式在touchmove时候调用 ctx.clearRect(0,
0, ctx.canvas.width, ctx.canvas.height); for (var i = 0 ; i <
arr.length ; i++) { // 每帧先把面板画出来 drawCle(arr[i].x,
arr[i].y); } drawPoint(lastPoint);// 每帧花轨迹 drawLine(po ,
lastPoint);// 每帧画圆心 for (var i = 0 ; i < restPoint.length ; i++)
{ if (Math.abs(po.x – restPoint[i].x) < r && Math.abs(po.y –
restPoint[i].y) < r) { drawPoint(restPoint[i].x,
restPoint[i].y); lastPoint.push(restPoint[i]); restPoint.splice(i,
1); break; } } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function update(po) {// 核心变换方法在touchmove时候调用
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
 
        for (var i = 0 ; i < arr.length ; i++) { // 每帧先把面板画出来
            drawCle(arr[i].x, arr[i].y);
        }
 
        drawPoint(lastPoint);// 每帧花轨迹
        drawLine(po , lastPoint);// 每帧画圆心
 
        for (var i = 0 ; i < restPoint.length ; i++) {
            if (Math.abs(po.x – restPoint[i].x) < r && Math.abs(po.y – restPoint[i].y) < r) {
                drawPoint(restPoint[i].x, restPoint[i].y);
                lastPoint.push(restPoint[i]);
                restPoint.splice(i, 1);
                break;
            }
        }
 
    }

最后正是截至职业,把门路里面包车型大巴lastPoint保存的数组形成密码存在localstorage里面,之后就用来处通晓锁验证逻辑了

JavaScript

function storePass(psw) {// touchend甘休之后对密码和情状的拍卖 if
(pswObj.step == 一) { if (checkPass(pswObj.fpassword, psw)) { pswObj.step
= 二; pswObj.spassword = psw; document.getElementById(‘title’).innerHTML
= ‘密码保存成功’; drawStatusPoint(‘#2CFF二6’);
window.localStorage.setItem(‘passwordx’,
JSON.stringify(pswObj.spassword));
window.localStorage.setItem(‘chooseType’, chooseType); } else {
document.getElementById(‘title’).innerHTML = ‘一次不雷同,重新输入’;
drawStatusPoint(‘red’); delete pswObj.step; } } else if (pswObj.step ==
二) { if (checkPass(pswObj.spassword, psw)) {
document.getElementById(‘title’).innerHTML = ‘解锁成功’;
drawStatusPoint(‘#2CFF2陆’); } else { drawStatusPoint(‘red’);
document.getElementById(‘title’).innerHTML = ‘解锁退步’; } } else {
pswObj.step = 一; pswObj.fpassword = psw;
document.getElementById(‘title’).innerHTML = ‘再度输入’; } }

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
function storePass(psw) {// touchend结束之后对密码和状态的处理
        if (pswObj.step == 1) {
            if (checkPass(pswObj.fpassword, psw)) {
                pswObj.step = 2;
                pswObj.spassword = psw;
                document.getElementById(‘title’).innerHTML = ‘密码保存成功’;
                drawStatusPoint(‘#2CFF26’);
                window.localStorage.setItem(‘passwordx’, JSON.stringify(pswObj.spassword));
                window.localStorage.setItem(‘chooseType’, chooseType);
            } else {
                document.getElementById(‘title’).innerHTML = ‘两次不一致,重新输入’;
                drawStatusPoint(‘red’);
                delete pswObj.step;
            }
        } else if (pswObj.step == 2) {
            if (checkPass(pswObj.spassword, psw)) {
                document.getElementById(‘title’).innerHTML = ‘解锁成功’;
                drawStatusPoint(‘#2CFF26’);
            } else {
                drawStatusPoint(‘red’);
                document.getElementById(‘title’).innerHTML = ‘解锁失败’;
            }
        } else {
            pswObj.step = 1;
            pswObj.fpassword = psw;
            document.getElementById(‘title’).innerHTML = ‘再次输入’;
        }
 
    }

解锁组件

将那些HTML5解锁写成了二个零件,放在https://github.com/lvming6816077/H5lock

二维码体验: 图片 2

 

参考资料:http://www.nihaoshijie.com.cn/index.php/archives/537

1 赞 4 收藏 1
评论

图片 3

JS:

5.Enyo
http://enyojs.com/
Use Enyo to develop apps for all major platforms, from phones and
tablets to PCs and TVs

 http://www.infoq.com/cn/news/2014/05/web-ui-framework

微软在MIT下开源DirectX工具集最新开源的软件包涵了:DirectX Tool
Kit,DirectXTex,DirectXMesh,UVAtlas,Effects 11,DXUT1①,Sample
Content Exporter等等。

 

http://extjs.org.cn/node/699
乘机Web技巧的不停升高,前端开拓框架屡见不鲜,各有长短,开辟者在做本事选型时老是要费壹番心力,近来,IBM高工刘培侠撰文对Bootstrap、jQuery
UI、jQuery Mobile、Sencha ExtJS、Sencha Touch、Sencha GXT、Dojo、Dojo
Mobile、Mootools、Foundation、YUI、Kissy、QWrap 等 15个国内外前端开辟框架进行了相比较详细的可比,格外值得读者借鉴。
http://www.infoq.com/cn/news/2014/05/web-ui-framework

201五 年最好的 5 个 HTML伍 框架
http://www.oschina.net/translate/top-html5-frameworks-in-2015?print

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>H5lock</title>
    <style type="text/css">
        body {
            text-align: center;
            background-color: #305066;
        }
        .title {
            color: #22C3AA;
        }
    </style>

    </head>
<body>
<script type="text/javascript" src="javascripts/H5lock.js"></script>
<script type="text/javascript">
//http://www.nihaoshijie.com.cn/index.php/archives/537http://www.nihaoshijie.com.cn/index.php/archives/537
 /* 
JSCity:把源码可视化成建筑物的 JS 库
http://threejs.org/examples/ http://www.inf.usi.ch/phd/wettel/codecity-download.html https://github.com/lvming6816077/H5lock
HTML5实现屏幕手势解锁
*/ new H5lock({ chooseType: 3 }).init(); </script> </body> </html>
  • Bootstrap要害针对桌面端市场,Bootstrap3建议活动优先,可是当下桌面端仍旧依旧 Bootstrap
    的基本点目的商场。Bootstrap 首要基于 jQuery 进行 JavaScript 管理,协理LESS 来做 CSS 的扩展。假若想要在 Bootstrap 框架中央银行使
    Sass,则须求通过
    Bootstrap-Sass品种扩大包容。Bootstrap
    框架在布局、版式、控件、特效方面都尤其让人看中,都预置了丰盛的效应,极大便利了用户支付。在作风设置方面,还供给用户在下载时手动设置,可陈设粒度相当的细,相应也正如麻烦,不太直观,需求对
    Bootstrap 异常纯熟配置起来才干百发百中。
  • jQuery UI是 jQuery
    项目组中对桌面端的扩展,包涵了丰硕的控件和特效,与 jQuery
    无缝包容。同时,jQuery UI
    中预置了种种品格供用户挑选,防止了千篇1律。借使你对预置的风骨不顺心,还足以透过
    jQuery UI 的可视化分界面,自助对 jQuery UI
    的体现效果开始展览布署,非凡便利,够高档大气上档期的顺序。
  • Sencha Ext JS是 Sencha 基于
    Ext JS
    开垦的前端框架,内容极其充足,控件、特效等支撑越发非凡充分,表格、图画、报告、布局、乃至数据连接,总总林林。唯有你想不到,未有它无法。基于
    Sass 和 Compass,使得用户对格式的改动和特效制作尤其有利于。商业化是
    Sencha 的另1把利剑。辅助 Sencha
    披荆斩棘之时,也把大把的码农砍在马下。Sencha
    规定,凡是商业化的选拔,都要求付费。别的,Sencha
    的支援产品也整整收款,不然只可以是试用版。
  • Dojo,近日唯一能与 Sencha Ext JS
    一较高下的框架就唯有 Dojo了。抱着 IBM、VMWare 等多数大腿,Dojo
    的一举一动都额外举世瞩目。Dojo
    项目标产品线和职能也专门丰硕。首先,Dojo 有自身的 DOM 解析器
    Nano,是 DOM 解析和拍卖的水源。其它,Dojo 的 Web
    框架有非凡丰裕的布局、版式、控件以及特效,对多语言以及图片的强大帮助都至极好,并援助对地图的操作。大家能够查看它的演示,与
    Ext JS 的成效开展比较。其它,Dojo 还有本人的图形化设计和开荒工具
    Maqetta,能够经过拖拽实现设计。Dojo
    的品格设置不是在下载的时候钦命的,而是经过引用差别的 CSS
    格式来落到实处。
  • Mootools能够说是当前最轻量级的前端框架,内核
    js 压缩完之后唯有 8k,完整版压缩之后也不到
    十0k,远比其它框架要小多数。Mootools 有谈得来的面向对象设计的内核
    Mootools
    Core。伴随着小小的的文件大小,框架的职能比其余框架也要弱不少,唯有在控件和特效上有一些些支撑。
  • Prototype
    JS
    也是三个轻巧的框架,有着丰硕的对 DOM
    操作的作用,对 Ajax 和 JSON 协理得都充足好,在动用上与 jQuery
    比较也相差不离。作为 Rails 默许的 JavaScript
    框架,相信对广阔开辟职员也很有借鉴意义的。
  • YUI用作开源前端框架的鼻祖,在框架上的素养极度之深。有着本身的解析
    DOM
    的主干框架,并且在特效、动画、图表等方面都有增进的扩张,并得以透过
    YQL 直接待上访问
    Yahoo!的多寡。在用户时时采纳的效应方面都怀有不错的变现。与 jQuery
    灵活的语法相比较,YUI
    显得尤为中规中矩,在代码协会、结构和情势方面都更抓好调,更显示出程序猿的如履薄冰。
  • Kissy是Ali公司独立开辟的前端框架,近年来在Taobao网、壹淘网等Ali系网址上赢得不少应用。Kissy
    框架模仿 jQuery 编写了友好的内核 Kissy Core,用于对 DOM 的剖析,Ajax
    管理等。同时,有着丰硕的控件,并促成了一些卡通效果和特效。同样,在
    Kissy 的控件中也足以见到 Bootstrap 等海外框架的阴影。别的,Kissy abc
    项目工具得以扶助用户落成自动化塑造,并有为数不少恢弘组件方便用户采纳。
  • Qwrap是百度有啊团队推出的 JavaScript
    框架,现在被收入 360,被布满应用与 360 产品中。Qwrap 综合
    jQuery、Prototype、YUI 特点,对 JavaScript
    进行了打包。然而,如果要把 Qwrap
    算成叁个前端开垦框架照旧多少牵强,因为除外 JavaScript
    类库之外,Qwrap 基本乏善可陈,还处于发展阶段。
  • Tangram是百度推出的另一个 JavaScript
    框架,被布满应用于百度系旗下的产品,与 Qwrap 类似,Tangram
    也只可以算是叁个 JavaScript 框架,对 JavaScript
    做了不少扩张,可是作为前端开荒框架照旧展现比较单薄。基于此,百度公司后续推出了五个依附Tangram 的品种,Magic 和 Baidu Template。

  

https://github.com/enyojs

 

来源:https://github.com/lvming6816077/H5lock
http://threejs.org/examples/
http://www.inf.usi.ch/phd/wettel/codecity-download.html
(JSCity:把源码可视化成建筑的 JS 库)
http://www.alloyteam.com/2015/07/html5-shi-xian-ping-mu-shou-shi-jie-suo/
(Web前端 腾讯AlloyTeam Blog )
http://top.jobbole.com/22960/(JSCity:把源码可视化成建筑物的 JS 库)

对于国内的前端开采框架,小编也做领会析:

(function(){
        window.H5lock = function(obj){
            this.height = obj.height;
            this.width = obj.width;
            this.chooseType = Number(window.localStorage.getItem('chooseType')) || obj.chooseType;
        };


        H5lock.prototype.drawCle = function(x, y) { // 初始化解锁密码面板
            this.ctx.strokeStyle = '#CFE6FF';
            this.ctx.lineWidth = 2;
            this.ctx.beginPath();
            this.ctx.arc(x, y, this.r, 0, Math.PI * 2, true);
            this.ctx.closePath();
            this.ctx.stroke();
        }
        H5lock.prototype.drawPoint = function() { // 初始化圆心
            for (var i = 0 ; i < this.lastPoint.length ; i++) {
                this.ctx.fillStyle = '#CFE6FF';
                this.ctx.beginPath();
                this.ctx.arc(this.lastPoint[i].x, this.lastPoint[i].y, this.r / 2, 0, Math.PI * 2, true);
                this.ctx.closePath();
                this.ctx.fill();
            }
        }
        H5lock.prototype.drawStatusPoint = function(type) { // 初始化状态线条
            for (var i = 0 ; i < this.lastPoint.length ; i++) {
                this.ctx.strokeStyle = type;
                this.ctx.beginPath();
                this.ctx.arc(this.lastPoint[i].x, this.lastPoint[i].y, this.r, 0, Math.PI * 2, true);
                this.ctx.closePath();
                this.ctx.stroke();
            }
        }
        H5lock.prototype.drawLine = function(po, lastPoint) {// 解锁轨迹
            this.ctx.beginPath();
            this.ctx.lineWidth = 3;
            this.ctx.moveTo(this.lastPoint[0].x, this.lastPoint[0].y);
            console.log(this.lastPoint.length);
            for (var i = 1 ; i < this.lastPoint.length ; i++) {
                this.ctx.lineTo(this.lastPoint[i].x, this.lastPoint[i].y);
            }
            this.ctx.lineTo(po.x, po.y);
            this.ctx.stroke();
            this.ctx.closePath();

        }
        H5lock.prototype.createCircle = function() {// 创建解锁点的坐标,根据canvas的大小来平均分配半径

            var n = this.chooseType;
            var count = 0;
            this.r = this.ctx.canvas.width / (2 + 4 * n);// 公式计算
            this.lastPoint = [];
            this.arr = [];
            this.restPoint = [];
            var r = this.r;
            for (var i = 0 ; i < n ; i++) {
                for (var j = 0 ; j < n ; j++) {
                    count++;
                    var obj = {
                        x: j * 4 * r + 3 * r,
                        y: i * 4 * r + 3 * r,
                        index: count
                    };
                    this.arr.push(obj);
                    this.restPoint.push(obj);
                }
            }
            this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
            for (var i = 0 ; i < this.arr.length ; i++) {
                this.drawCle(this.arr[i].x, this.arr[i].y);
            }
            //return arr;
        }
        H5lock.prototype.getPosition = function(e) {// 获取touch点相对于canvas的坐标
            var rect = e.currentTarget.getBoundingClientRect();
            var po = {
                x: e.touches[0].clientX - rect.left,
                y: e.touches[0].clientY - rect.top
              };
            return po;
        }
        H5lock.prototype.update = function(po) {// 核心变换方法在touchmove时候调用
            this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);

            for (var i = 0 ; i < this.arr.length ; i++) { // 每帧先把面板画出来
                this.drawCle(this.arr[i].x, this.arr[i].y);
            }

            this.drawPoint(this.lastPoint);// 每帧花轨迹
            this.drawLine(po , this.lastPoint);// 每帧画圆心

            for (var i = 0 ; i < this.restPoint.length ; i++) {
                if (Math.abs(po.x - this.restPoint[i].x) < this.r && Math.abs(po.y - this.restPoint[i].y) < this.r) {
                    this.drawPoint(this.restPoint[i].x, this.restPoint[i].y);
                    this.lastPoint.push(this.restPoint[i]);
                    this.restPoint.splice(i, 1);
                    break;
                }
            }

        }
        H5lock.prototype.checkPass = function(psw1, psw2) {// 检测密码
            var p1 = '',
            p2 = '';
            for (var i = 0 ; i < psw1.length ; i++) {
                p1 += psw1[i].index + psw1[i].index;
            }
            for (var i = 0 ; i < psw2.length ; i++) {
                p2 += psw2[i].index + psw2[i].index;
            }
            return p1 === p2;
        }
        H5lock.prototype.storePass = function(psw) {// touchend结束之后对密码和状态的处理
            if (this.pswObj.step == 1) {
                if (this.checkPass(this.pswObj.fpassword, psw)) {
                    this.pswObj.step = 2;
                    this.pswObj.spassword = psw;
                    document.getElementById('title').innerHTML = '密码保存成功';
                    this.drawStatusPoint('#2CFF26');
                    window.localStorage.setItem('passwordxx', JSON.stringify(this.pswObj.spassword));
                    window.localStorage.setItem('chooseType', this.chooseType);
                } else {
                    document.getElementById('title').innerHTML = '两次不一致,重新输入';
                    this.drawStatusPoint('red');
                    delete this.pswObj.step;
                }
            } else if (this.pswObj.step == 2) {
                if (this.checkPass(this.pswObj.spassword, psw)) {
                    document.getElementById('title').innerHTML = '解锁成功';
                    this.drawStatusPoint('#2CFF26');
                } else {
                    this.drawStatusPoint('red');
                    document.getElementById('title').innerHTML = '解锁失败';
                }
            } else {
                this.pswObj.step = 1;
                this.pswObj.fpassword = psw;
                document.getElementById('title').innerHTML = '再次输入';
            }

        }
        H5lock.prototype.makeState = function() {
            if (this.pswObj.step == 2) {
                document.getElementById('updatePassword').style.display = 'block';
                //document.getElementById('chooseType').style.display = 'none';
                document.getElementById('title').innerHTML = '请解锁';
            } else if (this.pswObj.step == 1) {
                //document.getElementById('chooseType').style.display = 'none';
                document.getElementById('updatePassword').style.display = 'none';
            } else {
                document.getElementById('updatePassword').style.display = 'none';
                //document.getElementById('chooseType').style.display = 'block';
            }
        }
        H5lock.prototype.setChooseType = function(type){
            chooseType = type;
            init();
        }
        H5lock.prototype.updatePassword = function(){
            window.localStorage.removeItem('passwordxx');
            window.localStorage.removeItem('chooseType');
            this.pswObj = {};
            document.getElementById('title').innerHTML = '绘制解锁图案';
            this.reset();
        }
        H5lock.prototype.initDom = function(){
            var wrap = document.createElement('div');
            var str = '<h4 id="title" class="title">绘制解锁图案</h4>'+
                      '<a id="updatePassword" style="position: absolute;right: 5px;top: 5px;color:#fff;font-size: 10px;display:none;">重置密码</a>'+
                      '<canvas id="canvas" width="300" height="300" style="background-color: #305066;display: inline-block;margin-top: 15px;"></canvas>';
            wrap.setAttribute('style','position: absolute;top:0;left:0;right:0;bottom:0;');
            wrap.innerHTML = str;
            document.body.appendChild(wrap);
        }
        H5lock.prototype.init = function() {
            this.initDom();
            this.pswObj = window.localStorage.getItem('passwordxx') ? {
                step: 2,
                spassword: JSON.parse(window.localStorage.getItem('passwordxx'))
            } : {};
            this.lastPoint = [];
            this.makeState();
            this.touchFlag = false;
            this.canvas = document.getElementById('canvas');
            this.ctx = this.canvas.getContext('2d');
            this.createCircle();
            this.bindEvent();
        }
        H5lock.prototype.reset = function() {
            this.makeState();
            this.createCircle();
        }
        H5lock.prototype.bindEvent = function() {
            var self = this;
            this.canvas.addEventListener("touchstart", function (e) {
                e.preventDefault();// 某些android 的 touchmove不宜触发 所以增加此行代码
                 var po = self.getPosition(e);
                 console.log(po);
                 for (var i = 0 ; i < self.arr.length ; i++) {
                    if (Math.abs(po.x - self.arr[i].x) < self.r && Math.abs(po.y - self.arr[i].y) < self.r) {

                        self.touchFlag = true;
                        self.drawPoint(self.arr[i].x,self.arr[i].y);
                        self.lastPoint.push(self.arr[i]);
                        self.restPoint.splice(i,1);
                        break;
                    }
                 }
             }, false);
             this.canvas.addEventListener("touchmove", function (e) {
                if (self.touchFlag) {
                    self.update(self.getPosition(e));
                }
             }, false);
             this.canvas.addEventListener("touchend", function (e) {
                 if (self.touchFlag) {
                     self.touchFlag = false;
                     self.storePass(self.lastPoint);
                     setTimeout(function(){

                        self.reset();
                    }, 300);
                 }


             }, false);
             document.addEventListener('touchmove', function(e){
                e.preventDefault();
             },false);
             document.getElementById('updatePassword').addEventListener('click', function(){
                 self.updatePassword();
              });
        }
})();

3.Foundation
http://foundation.zurb.com/

从外国的桌面端框架来讲,小编以为根本有以下多少个:

  HTML5:

4.LimeJS
LimeJS is a HTML5 game framework for building fast, native-experience
games for all modern touchscreens and
desktop browsers.
http://www.limejs.com/

1.ionic http://ionicframework.com/
https://github.com/driftyco
Advanced HTML5 mobile development framework and SDK. Build incredible
mobile apps with web technologies you already know and love. Best
friends with AngularJS.

2.Siimpler
Siimpler enables you to build your HTML5 starting boilerplate by
selecting the parts which you want to include.
http://siimpler.com/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图