xml地图|网站地图|网站标签 [设为首页] [加入收藏]

正规赌博十大app排名

当前位置:网上十大正规赌博平台 > 正规赌博十大app排名 > HTML5实现屏幕手势解锁,拖拽上传前传

HTML5实现屏幕手势解锁,拖拽上传前传

来源:http://www.nb-machinery.com 作者:网上十大正规赌博平台 时间:2019-10-19 03:00

IE开发者工具教程

2015/01/13 · JavaScript · IE

原文出处: YouYaInsist的博客   

File杂谈——拖拽上传前传

2015/07/24 · HTML5 · 拖拽上传

原文出处: 百码山庄   

在《File杂谈——初识file控件》一文中,我们已经对file控件有了初步的了解,并且对制作一个视觉和体验一致的file控件做了较为详细的说明,今天我们继续了解file控件的更多特性,并延伸出更多。

HTML5实现屏幕手势解锁

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

原文出处: AlloyTeam   

效果展示

图片 1

实现原理 利用HTML5的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 == 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 = '再次输入'; } }

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解锁写成了一个组件,放在

二维码体验: 图片 2

 

参考资料:

1 赞 4 收藏 1 评论

图片 3

写在前面

一直非常谷歌的控制台,因为我是做前端的,谷歌浏览器在我看来是解析JS最快的浏览器,所谓的熟能生巧,用熟悉了谷歌浏览器之后就特别喜欢用谷歌的控制台调试脚本、改变样式、查看HTML、查看资源加载等信息。

在这儿推荐两篇关于谷歌控制台怎么使用的三篇博文(在我看来这三篇博文是我看过介绍谷歌控制台最佳最全的使用手册啦)

Chrome 控制台不完全指南

Chrome 控制台console的用法

Chrome控制台如何调试JavaScript

新增属性

在HTML5到来之前,绝大多数情况下使用file控件,我们前端工程师需要的有用信息都只能通过value属性获得的文件名字符串来获取(比如:文件类型、文件的直接名称等),这个很不方便,多文件上传的时候就更加麻烦了。另外,我们想不通过其他手段获取上传文件的大小更是一种奢望。

不过,好在这一切并没有那么糟,随着HTML5的到来,file控件上新增了files属性。该属性包括了file控件选择的文件对象集合,每个文件对象包含了当前文件的基本信息(类型、名称、大小)等,这样一来我们再也不用使用正则啊,字符串拆分啊,等等麻烦的方法去获取我们想要的信息了。下面我们在Chrome的控制台看下files属性的结构。我的测试方法是这样的:

首先,使用Chrome浏览器随便打开一个网页,然后F12调出开发工具,接着在Console中输入:

JavaScript

document.body.innerHTML = '<input type="file" id="J_File">'; var f = document.getElementById('J_File'); f.onchange = function() { console.log(this.files); };

1
2
3
4
5
document.body.innerHTML = '<input type="file" id="J_File">';
var f = document.getElementById('J_File');
f.onchange = function() {
    console.log(this.files);
};

这时页面会被替换成一个file控件,点击选择一个或多个(多个需要在input标签上增加multiple属性)本地文件,这时change事件将会被触发,控制台将会输出一下数据:

图片 4

显而易见,files属性的值是一个FileList类型的对象,它和数组类似,同样拥有length属性,而且我们也可以直接使用循环去获取每一个文件(File)对象(例:取第一个文件就是files[0])。我们继续看每个文件对象中包含的信息,我们常用的name、size、type等应有尽有了,突然感觉好高大上。

然而,我要告诉大家的是,我们也不能肆无忌惮的使用file控件的files属性,因为它在IE9及以下版本的IE浏览器中是不存在的,我们需要使用其他的手段(flash等)来弥补这个问题,这里就不展开了。

进入正题

我这篇文章可不是想介绍Chrome控制台,做前端最重要的就是要保持各个浏览器兼容,即使Chrome控制台很强大,但你能保证你的所有用户都能像你一样是Chrome的忠实粉丝吗?况且IE浏览器在中国市场上的占据份额那也是相当大的一部分的。

在此介绍一下IE开发人员工具(在没熟悉使用IE开发人员工具之前,我是打心底里特别讨厌IE的,熟悉使用之后才发现原来IE开发人员工具也是蛮可爱的)

其实从这件事情之后得到一个结论,不要议论任何人或者任何事不好,要怪只能怪你不懂。对万事万物还是怀着一颗宽容博大的心能让自己活得洒脱幸福些。(这是费话,大家跳过不看)

file控件的地位受到威胁

随着files属性的出现,file控件的地位显然得到了很好的提升,但是这并不表示它的地位更加稳固。随着HTML5二来的,并不只有file控件的files属性。我们已经可以在越来越多的网站上可以看到拖拽上传这个一个新颖并且更符合用户行为的交互效果。这里我先不说拖拽上传功能的实现,我们先一起来看看另一种获取FileList对象的方法。

首先,我们需要一个拖拽上传的静态界面,细节不多说,直接上代码:

XHTML

<style> * {margin: 0;padding: 0;} .up-area {margin: 50px auto;border: 1px dashed #ccc;background-color: #eee;width: 600px;height: 400px;line-height: 400px;text-align: center;color: #666;cursor: pointer;} .up-area:hover {background-color: #ddd;} </style> <input type="file" name="" id="J_UploadFile" style="display: none;"> <div class="up-area" id="J_UploadArea"> 点击此处或拖入文件进行上传 </div> <script> (function(){ var area = document.getElementById("J_UploadArea"), file = document.getElementById("J_UploadFile"); function uploadFile(fs) { console.log(fs); } area.onclick = function() { console.log('click'); file.click(); }; file.onchange = function() { uploadFile(this.files); }; area.ondragenter = function(ev) { this.className = 'up-area hover'; ev.preventDefault(); }; area.ondragover = function(ev) { ev.preventDefault(); }; area.ondrop = function(ev) { ev.preventDefault(); console.log('drop'); var dt = ev.dataTransfer; this.className = 'up-area'; uploadFile(dt.files); }; })(); </script>

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
36
37
38
39
<style>
    * {margin: 0;padding: 0;}
    .up-area {margin: 50px auto;border: 1px dashed #ccc;background-color: #eee;width: 600px;height: 400px;line-height: 400px;text-align: center;color: #666;cursor: pointer;}
    .up-area:hover {background-color: #ddd;}
</style>
<input type="file" name="" id="J_UploadFile" style="display: none;">
<div class="up-area" id="J_UploadArea">
    点击此处或拖入文件进行上传
</div>
<script>
(function(){
    var area = document.getElementById("J_UploadArea"),
        file = document.getElementById("J_UploadFile");
    function uploadFile(fs) {
        console.log(fs);
    }
    area.onclick = function() {
        console.log('click');
        file.click();
    };
    file.onchange = function() {
        uploadFile(this.files);
    };
    area.ondragenter = function(ev) {
        this.className = 'up-area hover';
        ev.preventDefault();
    };
    area.ondragover = function(ev) {
        ev.preventDefault();
    };
    area.ondrop = function(ev) {
        ev.preventDefault();
        console.log('drop');
        var dt = ev.dataTransfer;
        this.className = 'up-area';
        uploadFile(dt.files);
    };
})();
</script>

在线Demo。将文件拖入灰色区域释放便可以在页面上看到文件信息。

细心的朋友可能已经发现了,其实我们这里又提供了优化file控件的另外一种方式——完全使用另一个标签替代,在该标签的click事件中主动触发file控件的click事件,正如上面代码中的: file.click() 。但是,这不是本文的重点。

我们仔细看上面代码中的最后一段,即ondrop的事件处理函数,我们的files对象并不是来自file控件,而是一个叫dataTransfer的东西。那么我们是不是可以大胆的猜测,拖拽上传功能其实可以完全抛开file控件独立完成?这里先留个悬念,我们以后再讨论。

在上面的案例中我们通过点击来选择文件从而获取FileList对象,和通过将文件拖拽到灰色区域来获取FileList对象,这两种方式虽不同,但我们得到的数据确是一样的,这足以说明file控件不再独裁,它的地位已经渐渐开始受到威胁。

1 赞 1 收藏 评论

图片 5

简单介绍

像Chrome控制台一样,要打开IE开发人员工具也是按快捷键F12即可。

可以看到,在主工作区中有六个选项卡—-HTML、CSS、控制台、Javascript(脚本)、Profiler(探查器)、网络。这就是开发工作的主要环境。

1、HTML是默认的选项卡,网页的源代码就以DOM树的形式在其中展示。点击最左边的 号,可以展开/收缩该DOM元素。

2、CSS选项卡主要是列出页面的样式,如果当前页面有多个外部样式表的话,则可以从下拉选择框中进行选择来查看相应的样式文件。

3、控制台选项卡主要是方便开发人员进行日志记录或者脚本调试等(现在IE9也支持console.log 不信你在下方的文本框里面输入试试),当然你也可以在里面输入多行脚本然后点击右侧的小绿色按钮(绿色按钮叫运行脚本)

图片 6

4、脚本选项卡就不多说了,主要是方便开发人员进行脚本调试。(在下文中将会介绍如何进行脚本调试)

5、探查器选项卡主要用来进行脚本调优和脚本统计等功能,它列出Javascript脚本中每一个函数、每一个命令运行的次数和所花费的时间,很有助于找出网页代码的性能瓶颈。

6、网络选项卡一般用来查看资源的加载信息

本文由网上十大正规赌博平台发布于正规赌博十大app排名,转载请注明出处:HTML5实现屏幕手势解锁,拖拽上传前传

关键词: