纯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编程起步(第四课)
Feb 27 Javascript
用js实现控制内容的向上向下滚动效果
Jun 26 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
Apr 05 Javascript
讨论html与javascript在浏览器中的加载顺序问题
Nov 27 Javascript
jquery中子元素和后代元素的区别示例介绍
Apr 02 Javascript
让IE8浏览器支持function.bind()方法
Oct 16 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
Aug 12 Javascript
BootStrap表单控件之文本域textarea
May 23 Javascript
JS按条件 serialize() 对应标签的使用方法
Jul 24 Javascript
Three.js利用性能插件stats实现性能监听的方法
Sep 25 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
Mar 13 Javascript
vue子路由跳转实现tab选项卡
Jul 24 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 选项及相关信息函数库
2006/12/04 PHP
php完全过滤HTML,JS,CSS等标签
2009/01/16 PHP
php自定义函数之递归删除文件及目录
2010/08/08 PHP
php修改NetBeans默认字体的大小
2013/07/02 PHP
一个经典的PHP文件上传类分享
2014/11/18 PHP
php绘图之生成饼状图的方法
2015/01/24 PHP
Laravel4中的Validator验证扩展用法详解
2016/07/26 PHP
JavaScript高级程序设计 学习笔记 js高级技巧
2011/09/20 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
2012/12/26 Javascript
鼠标滚轴控制文本框值的JS代码
2013/11/19 Javascript
Angular中的Promise对象($q介绍)
2015/03/03 Javascript
JS获取网页图片name属性的方法
2015/04/01 Javascript
深入解读JavaScript中的Iterator和for-of循环
2015/07/28 Javascript
JS实现不使用图片仿Windows右键菜单效果代码
2015/10/22 Javascript
jquery自定义表格样式
2015/11/23 Javascript
js中遍历Map对象的简单实例
2016/08/08 Javascript
JavaScript中的ES6 Proxy的具体使用
2019/06/16 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
2019/09/24 Javascript
Vue data的数据响应式到底是如何实现的
2020/02/11 Javascript
[01:21]DOTA2周边文化主题展 神秘商店火热开售
2017/07/30 DOTA
python 实现文件的递归拷贝实现代码
2012/08/02 Python
深入讲解Python中的迭代器和生成器
2015/10/26 Python
Python数据操作方法封装类实例
2017/06/23 Python
[机器视觉]使用python自动识别验证码详解
2019/05/16 Python
python缩进长度是否统一
2020/08/02 Python
css3背景图片透明叠加属性cross-fade简介及用法实例
2013/01/08 HTML / CSS
有趣的流行文化T恤、马克杯、手机壳和更多:Look Human
2019/01/07 全球购物
德国前卫设计师时装在线商店:Luxury Loft
2019/11/04 全球购物
澳大利亚窗帘商店:Curtain Wonderland
2019/12/01 全球购物
《毛主席在花山》教学反思
2014/04/20 职场文书
舞蹈教育学专业求职信
2014/06/29 职场文书
乡镇群众路线教育实践活动整改措施
2014/10/04 职场文书
婚内分居协议书范文
2014/11/26 职场文书
500字作文之关于爸爸
2019/11/14 职场文书
tensorflow学习笔记之tfrecord文件的生成与读取
2021/03/31 Python
Python实现对齐打印 format函数的用法
2022/04/28 Python