html,js实现九宫格解锁bug求大佬给看看

k906559098 2017-03-27 04:05:13
<!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实现网页解锁功能(基于iphone6)</title>
<style type="text/css">
html,
body {
margin: 0;
padding: 0;
width: 380px;
height: 600px;
}

#set {
margin-left: 120px;
}

#test {
margin-top: 20px;
margin-left: 120px;
}
</style>
<script type="text/javascript">
/**
* 半径,画布宽度,画布高度,画布x内边距,画布y内边距
*/
var R = 26,
canvasWidth = 400,
canvasHeight = 320,
OffsetX = 30,
OffsetY = 30;
var circleArr = [];
var theSecondResult = [];
var aa = [];
var bb = [];
var n = 1;


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);
return pwdArr;
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);
var theResult = pwdArr.join("->");



// alert("密码结果是:" + theResult);

if (document.getElementById("set").checked === true) { //选择功能为设置密码
if (pwdArr.length < 5) { //判断密码长度
alert("密码过短,请重新输入");
pwdArr = [];
} else {
localStorage.thePassword = theResult;
bb = theResult;
//次数
alert("设置的密码为:" + localStorage.thePassword);
alert("请再次输入密码");

n++;
}
}
secondbindEvent(canvas, cxt);
}, false);
if (document.getElementById("test").checked === true) { //选择功能为验证密码
alert("请测试");
if (pwdArr == localStorage.thePassword) {


}
}
return n;

}

function secondbindEvent(canvas, cxt) {
var pwdArr1 = [];
canvas.addEventListener("touchstart", function(e) {
getSelectPwd(e.touches[0], pwdArr1);
}, false);
canvas.addEventListener("touchmove", function(e) {
e.preventDefault();
var touches = e.touches[0];
getSelectPwd(touches, pwdArr1);
cxt.clearRect(0, 0, canvasWidth, canvasHeight);
Draw(cxt, circleArr, pwdArr1, {
X: touches.pageX,
Y: touches.pageY
});
}, false);
canvas.addEventListener("touchend", function(e) {
cxt.clearRect(0, 0, canvasWidth, canvasHeight);
Draw(cxt, circleArr, pwdArr1, null);
var theResult1 = pwdArr1.join("->");
alert("2222");
aa = theResult1;
localStorage.theSecond = aa;
if (n >= 2) {

if (localStorage.theSecond = bb) {
alert("设置成功!");
n = 0;
} else if (localStorage.theSecond != bb) {
alert("两次输入密码不一致!");
}
}
}, false);


}
</script>
</head>

<body>
<canvas id="lockCanvas"></canvas>
<form action="" method="get">
<label>
<input name="password" id="set" type="radio" value="1" checked="checked" />设 置 密 码</br>
</label>
<label>
<input name="password" id="test" type="radio" value="2" />验 证 密 码</label>
</form>
</body>

</html>


想实现一个九宫格解锁,首先设置输入一次后计算的pwdArr值保存到localstorage用来验证解锁,然后二次输入验证,但是要清空画布,此刻清空画布后又会跳到第一步,因为这些都是绑定在画布事件touchend上的,我就想再次建立一个事件用于获取二次输入值,但是怎么都实现不了,请大神帮我看看,怎么实现将二次输入的值保存然后和第一次输入的值比较保存!万分感谢
...全文
288 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
k906559098 2017-03-27
  • 打赏
  • 举报
回复
自己解决了~谢谢大家
k906559098 2017-03-27
  • 打赏
  • 举报
回复
求大佬啊啊啊比较急啊
k906559098 2017-03-27
  • 打赏
  • 举报
回复
引用 4 楼 Free_Wind22 的回复:
把获取用户输入用一个函数来处理,得到值后用回调函数传出去,再作后续判断
0.0怎么用函数获取啊,我是直接touchend传出来的pwsArr,然后保存在localStroage里面了,现在愁的是没办法进行二次获取, pwdArr=[]之后就会重新执行第一个循环
2017-03-27
  • 打赏
  • 举报
回复
把获取用户输入用一个函数来处理,得到值后用回调函数传出去,再作后续判断
k906559098 2017-03-27
  • 打赏
  • 举报
回复
引用 2 楼 functionsub 的回复:
。。。钻牛角尖了。 没必要加第二个事件,你已经有个n来标示是第几次输入了,在touchend的方法里,你判断下如果是第二次,直接从localStorage里取出值跟pwdArr进行比较不就是了?
主要是现在没法进行第二次输入啊,我也想取出第二次的值~但是会不断循环请再次输入密码
functionsub 2017-03-27
  • 打赏
  • 举报
回复
。。。钻牛角尖了。 没必要加第二个事件,你已经有个n来标示是第几次输入了,在touchend的方法里,你判断下如果是第二次,直接从localStorage里取出值跟pwdArr进行比较不就是了?
k906559098 2017-03-27
  • 打赏
  • 举报
回复
= = 没人么 急急急急急急
内容概要:本文详细记录了对一个Android ARM64静态ELF文件中字符串加密机制的逆向分析过程。该ELF文件的所有字符串均被加密,无法通过常规strings命令或IDA直接识别。作者通过分析发现,加密字符串存储在.rodata段,其解密所需信息(包括密文地址、长度和16位密钥)保存在.data.rel.ro段的40字节描述符中。核心解密函数sub_10F408采用自反的双pass流密码算法,结合固定密钥KEY_TERM(由.data段24字节数据计算得出),实现字节级非线性、位置与长度相关的加密。文章还复现了完整的Python解密脚本,并揭示了该保护机制的本质为代码混淆而非强加密,最终成功批量解密全部956条字符串,暴露程序真实行为,如shell命令模板、设备标识篡改、网络重置等操作。此外,文中还提及未启用的自定义壳框架及其反dump设计。; 适合人群:具备逆向工程基础的安全研究人员、二进制分析人员及对ELF保护技术感兴趣的开发者。; 使用场景及目标:①学习ELF二进制中字符串加密的典型实现方式与逆向突破口;②掌握从结构识别、函数追踪到算法还原的完整逆向流程;③理解“绑定二进制”的完整性校验设计及其局限性;④实践编写IDAPython脚本自动化提取与解密敏感数据。; 阅读建议:此资源以实战案例驱动,不仅展示技术细节,更强调逆向思维与验证方法,建议读者结合IDA调试环境,逐步跟随文中步骤进行动态分析与算法验证,深入理解每一步的推理依据。

87,989

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧