行動手機裝置上有一個螢幕解鎖的應用程式相信大家都不陌生，在行動裝置上，使用者可以透過設定鎖定圖案作為密碼對裝置使用者介面進行鎖定，鎖定介面如下圖所示。
效果圖如下圖
JavaScript Code
<script>
$("#gesturepwd").GesturePasswd({
backgroundColor:"#2980B9", //背景色
color:"#FFFFFF", //主要的控件颜色
roundRadii:50, //大圆点的半径
pointRadii:12, //大圆点被选中时显示的圆心的半径
space:60, //大圆点之间的间隙
width:480, //整个组件的宽度
height:480, //整个组件的高度
lineColor:"#ECF0F1", //用户划出线条的颜色
zindex :100 //整个组件的css z-index属性
});
$("#gesturepwd").on("hasPasswd",function(e,passwd){
var result;
if(passwd == "1235789"){
result=true;
}
else {
result=false;
}
if(result == true){
$("#gesturepwd").trigger("passwdRight");
setTimeout(function(){
//密码验证正确后的其他操作，打开新的页面等。。。
alert("Pattern is correct")
},500); //延迟半秒以照顾视觉效果
}
else{
$("#gesturepwd").trigger("passwdWrong");
//密码验证错误后的其他操作。。。
}
});
</script> 以上代碼也很簡單吧，純js代碼實現移動設備繪圖解鎖，當然這是核心代碼，其他的還需要小伙伴們根據自己的需求自行發揮。希望本文分享能給大家幫忙。
