jQuery手机图案密码锁设置代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery手机图案密码锁设置代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="zh">
<head>
<title>jQuery手机图案密码锁设置代码</title>
<meta charset="UTF-8">

<style>
	body {
		overflow: auto;
		background-color: #272727;
	}
	#content {
		position: fixed;
		overflow: hidden;
		top: 50%;
		left: 50%;
		width: 400px;
		height: 400px;
		margin: -299px 0 0 -199px;
		background-color: #1D1D1D;
		border-radius: 10px;
		border: 1px solid #2b2b2b;
		border-bottom-color: #666;
		box-shadow: inset 0 0 10px #000;
	}
	#password {
		position: fixed;
		overflow: hidden;
		top: 50%;
		left: 50%;
		width: 400px;
		height: 50px;
		line-height: 50px;
		margin: 129px 0 0 -199px;
		background-color: #1D1D1D;
		border-radius: 10px;
		border: 1px solid #2b2b2b;
		border-bottom-color: #666;
		box-shadow: inset 0 0 10px #000;
		color: #fff;
		text-align: center;
		font-size: 16px;
	}
</style>
</head>
<body>
<div id="content"></div>
<div id="password"></div>
<script src="script/jquery.min.js"></script>
<script src="script/jquery.raphael.gpwd.min.js"></script>
<script>
	$(function() {
		// 密码字典(3x3矩阵请提供长度为9的字典 4x4为16 以此类推)
		var dict = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'];
		// 初始化
		var gpwd = $.GPWD('content', function(arr) {
			var password = '';
			$.each(arr, function(i, v) {
				password += dict[v];
			});
			// 得到密码后可以进行自定义操作
			$('#password').text(password);
		}, {matrix: 4, mindig: 4});
		
		/*
		 * 控件使用
		 * $.GPWD(id, callback(arr), settting(可选));
		 * 
		 * 参数说明
		 * settting = {
		 *   matrix: num(矩阵大小),
		 *   mindig: num(最小连线数),
		 *   其他参数调整中(包括样式 颜色 线条粗线)
		 * }
		 * 
		 * 其他方法
		 * var gpwd = $.GPWD(...);
		 * gpwd.reset(); 重置手势密码
		 * gpwd.error(); 标识连线错误
		 * gpwd.unload() 卸载手势密码
		 */
	});
</script>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)