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


Posted in Javascript onOctober 16, 2015

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

效果图如下所示

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

Javascript 相关文章推荐
保证JavaScript和Asp、Php等后端程序间传值编码统一
Apr 17 Javascript
javascript中callee与caller的用法和应用场景
Dec 08 Javascript
js获得页面的高度和宽度的方法
Feb 23 Javascript
javascript避免数字计算精度误差的方法详解
Mar 05 Javascript
js与css实现弹出层覆盖整个页面的方法
Dec 13 Javascript
下一代Bootstrap的5个特点 超酷炫!
Jun 17 Javascript
vue.js入门(3)——详解组件通信
Dec 02 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
Jun 30 Javascript
微信小程序tabBar底部导航中文注解api详解
Aug 16 Javascript
vue 动态修改a标签的样式的方法
Jan 18 Javascript
React Router V4使用指南(精讲)
Sep 17 Javascript
vue vant中picker组件的使用
Nov 03 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
Oct 16 #Javascript
javascript实现3D切换焦点图
Oct 16 #Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
Oct 16 #Javascript
jQuery实现带渐显效果的人物多级关系图代码
Oct 16 #Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
Oct 16 #Javascript
javascript实现动态标签云
Oct 16 #Javascript
在Ubuntu系统上安装Node.JS的教程
Oct 15 #Javascript
You might like
php的ajax框架xajax入门与试用介绍
2010/12/19 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
不常用但很实用的PHP预定义变量分析
2019/06/25 PHP
JavaScript DOM学习第八章 表单错误提示
2010/02/19 Javascript
javascript级联下拉列表实例代码(自写)
2013/05/10 Javascript
节点的插入之append()和appendTo()的用法介绍
2014/01/13 Javascript
jQuery 选择器详解
2015/01/19 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
2015/08/24 Javascript
jquery二级目录选中当前页的css样式
2016/12/08 Javascript
canvas实现简易的圆环进度条效果
2017/02/28 Javascript
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
2017/10/24 Javascript
vue路由拦截及页面跳转的设置方法
2018/05/24 Javascript
Vue.js 中的实用工具方法【推荐】
2019/07/04 Javascript
15 分钟掌握vue-next响应式原理
2019/10/13 Javascript
[01:02:04]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
python通过urllib2爬网页上种子下载示例
2014/02/24 Python
python中global与nonlocal比较
2014/11/21 Python
Python 中迭代器与生成器实例详解
2017/03/29 Python
python实现对图片进行旋转,放缩,裁剪的功能
2019/08/07 Python
Python定时发送天气预报邮件代码实例
2019/09/09 Python
django drf框架自带的路由及最简化的视图
2019/09/10 Python
解决python中import文件夹下面py文件报错问题
2020/06/01 Python
python palywright库基本使用
2021/01/21 Python
检测用户浏览器是否支持CSS3的方法
2009/08/29 HTML / CSS
包装类的功能、种类、常用方法
2012/01/27 面试题
Linux如何命名文件--使用文件名时应注意
2012/01/22 面试题
设计4个线程,其中两个线程每次对j增加1,另外两个线程对j每次减少1。写出程序。
2014/12/30 面试题
经典婚礼主持词
2014/03/13 职场文书
高中课前三分钟演讲稿
2014/08/18 职场文书
2014党员民主评议个人总结
2014/09/10 职场文书
车辆转让协议书
2014/09/24 职场文书
工厂标语大全
2014/10/06 职场文书
2015年教育实习工作总结
2015/04/24 职场文书
高中优秀作文(范文)
2019/08/15 职场文书
pytorch中的model.eval()和BN层的使用
2021/05/22 Python