基于canvas开发的手势密码插件,原生适配各种尺寸的APP或手机wap屏幕,html5触屏滑动的手势密码演示demo
手势插件html代码使用方法
<div id="password"></div>
<script src="yourPath/gesture.password.js"></script>
<script type="text/javascript">
var gp = new GesturePassword('password');
</script>
默认淡色
var p = new GesturePassword('gesturePassword', {
circle: {
sizeScale: 0.9,
default: {
strokeStyle: '#D5DBE8'
}
},
line: {
lineWidth: 3,
default: {
strokeStyle: '#D5DBE8'
}
},
dot: {
size: 8,
default: {
fillStyle: '#D5DBE8'
}
}
});
var msg = document.getElementById('message'), password;
p.on('complete', function(result) {
if (password) {
if (password === result) {
msg.innerHTML = '密码设置成功';
msg.classList.add('right')
p.setRight();
} else {
msg.innerHTML = '两次密码不一致';
msg.classList.add('error')
p.setWrong();
}
setTimeout(function() {
p.reset();
msg.innerHTML = '';
msg.className = '';
password = false;
}, 1500);
} else {//第一次输入时
password = result;
msg.innerHTML = '请再次输入密码'
setTimeout(function() {
p.reset();
}, 500);
}
});
深蓝色
var p = new GesturePassword('gesturePassword'),
msg = document.getElementById('message'), password;
p.on('complete', function(result) {
if (password) {
if (password === result) {
msg.innerHTML = '密码设置成功';
msg.classList.add('right')
p.setRight();
} else {
msg.innerHTML = '两次密码不一致';
msg.classList.add('error')
p.setWrong();
}
setTimeout(function() {
p.reset();
msg.innerHTML = '';
msg.className = '';
password = false;
}, 1500);
} else {//第一次输入时
password = result;
msg.innerHTML = '请再次输入密码'
setTimeout(function() {
p.reset();
}, 500);
}
});
密码从上到下,从左到右依次是数字1-9。如上面的【示例图片1】对应的密码是:12357。
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791