脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js 移动设备绘图解锁

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

 更新时间：2015年10月16日 09:59:11   投稿：mrr  
为了个人信息的安全起见，移动设备上都有个绘图解锁，使用起来非常简单，代码是怎么实现的呢？下面小编给大家介绍js实现移动设备绘图解锁，需要的朋友可以参考下

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

效果图如下所示


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

您可能感兴趣的文章:

相关文章

  • JavaScript实现JSON合并操作示例【递归深度合并】

    JavaScript实现JSON合并操作示例【递归深度合并】

    这篇文章主要介绍了JavaScript实现JSON合并操作,结合实例形式分析了javascript基于递归深度实现json合并操作相关实现技巧与注意事项,需要的朋友可以参考下
    2018-09-09
  • es7学习教程之fetch解决异步嵌套问题的方法示例

    es7学习教程之fetch解决异步嵌套问题的方法示例

    这篇文章主要给大家介绍了关于es7学习教程之fetch解决异步嵌套问题的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
    2017-07-07
  • 微信小程序使用modal组件弹出对话框功能示例

    微信小程序使用modal组件弹出对话框功能示例

    这篇文章主要介绍了微信小程序使用modal组件弹出对话框功能,结合实例形式分析了微信小程序model组件相关属性及事件响应操作技巧,需要的朋友可以参考下
    2017-11-11
  • 浅谈JavaScript 的执行顺序

    浅谈JavaScript 的执行顺序

    JavaScript是一种描述型脚本语言，它不同于java或C#等编译性语言,它不需要进行编译成中间语言,而是由浏览器进行动态地解析与执行。如果你不能理解javaScript语言的运行机制，或者简单地说，你不能掌握javascript的执行顺序，那你就犹如伯乐驾驭不了千里马
    2015-08-08
  • JS实现图片垂直居中显示小结

    JS实现图片垂直居中显示小结

    本文给大家分享了4中图片垂直居中显示的效果，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧
    2016-12-12
  • Ajax与Axios的基础知识以及详细对比总结

    Ajax与Axios的基础知识以及详细对比总结

    在Web开发中Ajax和Axios是两种实现异步数据请求的技术,Ajax可以在不刷新页面的情况下与服务器通信,Axios是一个基于Promise的HTTP客户端,简化了HTTP请求的过程,两者都能处理多种数据格式,这篇文章主要介绍了Ajax与Axios的基础知识以及详细对比总结,需要的朋友可以参考下
    2024-09-09
  • javascript 动态创建表格

    javascript 动态创建表格

    这篇文章主要介绍了javascript 动态创建表格,需要的朋友可以参考下
    2015-01-01
  • 微信小程序 button样式设置为图片的方法

    微信小程序 button样式设置为图片的方法

    这篇文章主要介绍了微信小程序 button 的样式设置为图片的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06
  • javascript html实现网页版日历代码

    javascript html实现网页版日历代码

    这篇文章主要介绍了javascript html实现网页版日历代码,需要的朋友可以参考下
    2016-03-03
  • js实现类似MSN提示的页面效果代码分享

    js实现类似MSN提示的页面效果代码分享

    这篇文章主要介绍了模仿MSN消息提示的效果,推荐给大家，有需要的小伙伴可以参考下。
    2015-08-08

最新评论