纯JavaScript代码实现移动设备绘图解锁_javascript技巧

移动手机设备上有一个屏幕解锁的应用相信大家都不陌生，在移动设备上，用户可以通过设置锁定图案作为密码对设备用户界面进行锁定，锁定界面如下图所示。

效果图如下所示

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代码实现移动设备绘图解锁，当然这是核心代码，其他的还需要小伙伴们根据自己的需求自行发挥。希望本文分享能给大家帮助。

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索js
绘图解锁
javascript 绘图、javascript svg 绘图、javascript 绘图拓扑、javascript绘图函数、cad绘图技巧，以便于您获取更多的相关知识。