js+html5实现手机九宫格密码解锁功能
HTML5真的是很强大，前端时间看到一个canvas实现九宫格的密码解锁。今天抽出时间模仿了一个，特定分享一下！
效果截图如下：
效果看起来还不错吧！
源码如下：
<!DOCTYPE html>
<html>
<head lang="zh-CN">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
<meta charset="UTF-8">
<title>html5实现网页解锁功能</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript">
/**
* 半径，画布宽度，画布高度，画布x内边距，画布y内边距
*/
var R = 26, canvasWidth = 400, canvasHeight = 320, OffsetX = 30, OffsetY = 30;
var circleArr = [];
function createCirclePoint(diffX, diffY) {
for (var row = 0; row < 3; row++) {
for (var col = 0; col < 3; col++) {
// 计算圆心坐标
var Point = {
X: (OffsetX + col * diffX + ( col * 2 + 1) * R),
Y: (OffsetY + row * diffY + (row * 2 + 1) * R)
};
circleArr.push(Point);
}
}
}
window.onload = function () {
var canvas = document.getElementById("lockCanvas");
canvasWidth = document.body.offsetWidth;//网页可见区域宽
canvas.width = canvasWidth;
canvas.height = canvasHeight;
var cxt = canvas.getContext("2d");
/**
* 每行3个圆
* OffsetX为canvas x方向内边距
* */
var X = (canvasWidth - 2 * OffsetX - R * 2 * 3) / 2;
var Y = (canvasHeight - 2 * OffsetY - R * 2 * 3) / 2;
createCirclePoint(X, Y);
bindEvent(canvas, cxt);
//CW=2*offsetX+R*2*3+2*X
Draw(cxt, circleArr, [],null);
}
function Draw(cxt, circleArr, pwdArr,touchPoint) {
if (pwdArr.length > 0) {
cxt.beginPath();
for (var i = 0; i < pwdArr.length; i++) {
var pointIndex = pwdArr[i];
cxt.lineTo(circleArr[pointIndex].X, circleArr[pointIndex].Y);
}
cxt.lineWidth = 10;
cxt.strokeStyle = "#627eed";
cxt.stroke();
cxt.closePath();
if(touchPoint!=null){
var lastPointIndex=pwdArr[pwdArr.length-1];
var lastPoint=circleArr[lastPointIndex];
cxt.beginPath();
cxt.moveTo(lastPoint.X,lastPoint.Y);
cxt.lineTo(touchPoint.X,touchPoint.Y);
cxt.stroke();
cxt.closePath();
}
}
for (var i = 0; i < circleArr.length; i++) {
var Point = circleArr[i];
cxt.fillStyle = "#627eed";
cxt.beginPath();
cxt.arc(Point.X, Point.Y, R, 0, Math.PI * 2, true);
cxt.closePath();
cxt.fill();
cxt.fillStyle = "#ffffff";
cxt.beginPath();
cxt.arc(Point.X, Point.Y, R - 3, 0, Math.PI * 2, true);
cxt.closePath();
cxt.fill();
if(pwdArr.indexOf(i)>=0){
cxt.fillStyle = "#627eed";
cxt.beginPath();
cxt.arc(Point.X, Point.Y, R -16, 0, Math.PI * 2, true);
cxt.closePath();
cxt.fill();
}
}
}
/**
* 计算选中的密码
*/
function getSelectPwd(touches,pwdArr){
for (var i = 0; i < circleArr.length; i++) {
var currentPoint = circleArr[i];
var xdiff = Math.abs(currentPoint.X - touches.pageX);
var ydiff = Math.abs(currentPoint.Y - touches.pageY);
var dir = Math.pow((xdiff * xdiff + ydiff * ydiff), 0.5);
if(dir > R || pwdArr.indexOf(i) >= 0)
continue;
pwdArr.push(i);
break;
}
}
/**
* 给画布绑定事件
*/
function bindEvent(canvas, cxt) {
var pwdArr = [];
canvas.addEventListener("touchstart", function (e) {
getSelectPwd(e.touches[0],pwdArr);
}, false);
canvas.addEventListener("touchmove", function (e) {
e.preventDefault();
var touches = e.touches[0];
getSelectPwd(touches,pwdArr);
cxt.clearRect(0,0,canvasWidth,canvasHeight);
Draw(cxt,circleArr,pwdArr,{X:touches.pageX,Y:touches.pageY});
}, false);
canvas.addEventListener("touchend", function (e) {
cxt.clearRect(0,0,canvasWidth,canvasHeight);
Draw(cxt,circleArr,pwdArr,null);
alert("密码结果是："+pwdArr.join("->"));
pwdArr=[];
}, false);
}
</script>
</head>
<body>
<canvas id="lockCanvas"></canvas>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
本文实例讲述了js实现类似iphone的网页滑屏解锁功能.分享给大家供大家参考,具体如下: iphone 的出现,打破了人们的用户体验,这一用户体验也延伸到了网页设计上.最近看到很多blog的评论都用类似iphone滑动解锁的方式实现.只有滑动解锁之后才能评论,或者做其他的事情.这个功能的实现,其实并不麻烦,关键是要有好的美工,做出好的滑动图片,然后javascript配合CSS就可以完成,我在这里也简单实现了一个,基本功能如下 1. 打开页面时隐藏评论框,你可以做成disable形式,下载源码
-
javascript单页面手势滑屏切换原理详解
H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 假设有5个页面,每个页面占屏幕100%宽,则创建一个DIV容器viewport,将其宽度(width) 设置为500%,然后将5个页面装入容器中,并让这5个页面平分整个容器,最后将容器的默认位置设置为0,overflow设置为hidden,这样屏幕就默认显示第一个页面. <div id="v
-
纯JavaScript代码实现移动设备绘图解锁
移动手机设备上有一个屏幕解锁的应用相信大家都不陌生,在移动设备上,用户可以通过设置锁定图案作为密码对设备用户界面进行锁定,锁定界面如下图所示. 效果图如下所示 JavaScript Code <script> $("#gesturepwd").GesturePasswd({ backgroundColor:"#2980B9", //背景色 color:"#FFFFFF", //主要的控件颜色 roundRadii:50, //大圆点的
-
javascript实现锁定网页、密码解锁效果（类似系统屏幕保护效果）
功能描述:打开一个网站的网页,过5分钟不动作,就会锁定页面,隐藏内容容器,显示一个容器用于输入密码,输入正确的密码来解锁.锁定后即使用户刷新页面,还是保留原来的状态.如已经锁定的,需要继续锁定,否则显示内容. 示例代码如下,通过document.onmouseover来实现多少分钟没有动作,使用计时器来实现. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o
-
javascript实现滑动解锁功能
实现效果: css样式代码略. html代码: 页面上导入了jquery.mobile .jquery 复制代码 代码如下: <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.js&quo
-
Hammer.js+轮播原理实现简洁的滑屏功能
最近有个任务,做一个非常小的h5的应用,只有2屏,需要做横向的全屏滑动切换和一些简单的动画效果,之前做这种东西用的是fullpage.js和jquery,性能不是很好,于是就想自己动手弄一个简单的东西来实现.最后我用zepto + hammer.js 和轮播的方式解决了这个问题,效果还不错,整个页面不开启Gzip时所有资源请求的数据大小为200KB左右.这篇文章总结下这个方法的实现思路. 效果演示: 1. 实现要点 1)滑屏借鉴bootstrap的carousel插件,不过完全没有它那个复杂,只
-
jQuery使用unlock.js插件实现滑动解锁
unlock.js插件具有以下特点: 滑动解锁. 尺寸.颜色.字体大小等都可以个性化定制. 完成解锁后会有回调函数,用来触发进一步的数据处理. 如何使用 1. 首先在页面中引入unlock.css和unlock.js文件. <link href="css/unlock.css" rel="external nofollow" rel="stylesheet"> <script src='js/unlock.js'><
-
AngularJS仿苹果滑屏删除控件
AngularJs被用来开发单页面应用程序(SPA),利用AJAX调用配合页面的局部刷新,可以减少页面跳转,从而获得更好的用户体验.Angular的ngView及其对应的强大路由机制,是实现SPA应用的核心模块.本文所说的页面切换指的就是这个路由机制,即根据不同的url展示不同的视图. 前端开发中,为了对列表项进行快捷操作,有时就添个按钮来简单实现.但是,有时会发现按钮影响美观,甚至影响列表行的布局.稍在网上搜索无果,而写此仿苹果滑屏删除控件. 依赖项:angularJS.jQuery 测试浏览
-
JavaScript资源预加载组件和滑屏组件的使用推荐
资源预加载组件--preload 队列,可以支持队列加载和回调,也可以加载视频或者音频 进度条,可以动态获取进度条信息 支持img标签的预加载,添加pSrc属性即可 原生ES5 demo Install: git clone https://github.com/jayZOU/preload.git npm install npm run es6 访问http://localhost:8080/es6-demo Examples <audio pSrc="../public/audio/a
-
js+html5实现手机九宫格密码解锁功能
HTML5真的是很强大,前端时间看到一个canvas实现九宫格的密码解锁.今天抽出时间模仿了一个,特定分享一下! 效果截图如下: 效果看起来还不错吧! 源码如下: <!DOCTYPE html> <html> <head lang="zh-CN"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
-
Python+uiautomator2实现手机锁屏解锁功能
业务需求:需要测试手机滑动解锁失败时事件的次数及等待的时间,本来想利用Python+Appium实现,但是Appium运行时自动给我解锁了.... 部分解释摘抄自:https://testerhome.com/topics/11357 python-uiautomator2是一个自动化测试开源工具,仅支持Android平台的原生应用测试 python-uiautomator2封装了谷歌自带的uiautomator2测试框架,提供便利的python接口.他允许测试人员直接在PC上编写Python的
-
通过jquery.cookie.js实现记住用户名、密码登录功能
Cookies 定义:让网站服务器把少量数据储存到客户端的硬盘或内存,从客户端的硬盘读取数据的一种技术: 下载与引入:jquery.cookie.js基于jquery:先引入jquery,再引入:jquery.cookie.js: 下载:http://plugins.jquery.com/cookie/ <script type="text/javascript" src="js/jquery.min.js"></script> <sc
-
Android仿手机QQ图案解锁功能
本文实例为大家分享了Android仿手机QQ图案解锁的具体代码,供大家参考,具体内容如下 ps:请不要再问我,为什么导入之后会乱码了. 其实,代码基本上都是从原生系统中提取的:LockPatternView.加密工具类,以及解锁逻辑等,我只是稍作修改,大家都知道,原生系统界面比较丑陋,因此,我特意把QQ的apk解压了,从中拿了几张图案解锁的图片,一个简单的例子就这样诞生了. 好了,废话不多说,我们来看看效果(最后两张是最新4.4系统,炫一下,呵呵): 1.最关健的就是那个自定义九宫格View,代
-
Android手机屏幕敲击解锁功能代码
1.前言 现在市面上有不少Android手机支持敲击屏幕解锁,敲击屏幕解锁是一项很实用的功能,但一来只支持敲击屏幕,二来只能用于解锁或锁屏,再者我们应用层的开发者切不进去,完全无法玩起来.开发者,开发者,我们既然身为开发者何不搞点大新闻,那么这次我来教教各位如何用代码来实现手机的敲击识别,听起来是不是很有趣,有些跃跃欲试呢.事实上在ios上已经有实现这个功能的应用:Knock,一款敲击来解锁Mac电脑的应用,售价4.99美元,约为33人民币.有时候真想去做ios开发,可以开心的为自己的应用定价,
-
Android仿支付宝手势密码解锁功能
Starting 创建手势密码可以查看 CreateGestureActivity.java 文件. 登陆验证手势密码可以看 GestureLoginActivity.java 文件. Features 使用了 JakeWharton/butterknife butterknife 使用了 ACache 来存储手势密码 /** * 保存手势密码 */ private void saveChosenPattern(List<LockPatternView.Cell> cells) { byte[
-
JS+HTML5实现图片在线预览功能
本文实例为大家分享了HTML5图片在线预览的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <title>HTML5图片预览</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="http://img9.ton
-
Android 5秒学会使用手势解锁功能
Android手势解锁 本文讲述的是一个手势解锁的库,可以定制显示隐藏宫格点.路径.并且带有小九宫格显示图,和震动!让你学会使用这个简单,高效的库! 先来一波效果效果展示: 手势解锁效果 今天给大家介绍的是本人良心制作的一个手势解锁开源库,大家有什么建议和想法都可以发到我的邮箱: diosamolee2014@gmail.com 或者评论,我会为大家提供我力所能及的帮助! GitHub地址: https://github.com/Diosamo/Gesture_Lock 添加依赖: 添加的gra
-
Android 仿小米锁屏实现九宫格解锁功能(无需图片资源)
最近公司要求做个九宫格解锁,本人用的是小米手机,看着他那个设置锁屏九宫格很好看,就做了该组件,不使用图片资源,纯代码实现. 尊重每个辛苦的博主,在http://blog.csdn.net/mu399/article/details/38734449的基础上进行修改 效果图: 关键代码类: MathUtil.Java /** * @author SoBan * @create 2016/12/5 15:52. */ public class MathUtil { public static dou
-
Android自定义View九宫格手势密码解锁
由于公司新的项目需要用到九宫格手势密码解锁的功能,于是觉得自己写一个.废话不多说,直接上效果图: 首选我们来分析下实现的思路: 1. 绘制出相对于这个View的居中的九个点,作为默认状态的点 2. 点击屏幕的时候是否点击在这九个点上 3. 在屏幕上滑动的时候,绘制两个点之间的线条,以及选中状态的点 4. 手指离开屏幕的时候判断手势密码是否正确,如若错误这把错误状态下的点和线绘制出来. 具体实现: 首先我们得绘制出默认正常状态下的九个点: /** * 点的bean * Created by Adm