纯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 核心参考教程 内置对象
Oct 13 Javascript
Document对象内容集合(比较全)
Sep 06 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
Jun 04 Javascript
Javascript 多物体运动的实现
Dec 24 Javascript
jQuery实现网站添加高亮突出显示效果的方法
Jun 26 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
Aug 21 Javascript
Vue实现双向绑定的方法
Dec 22 Javascript
浅谈js中同名函数和同名变量的执行问题
Feb 12 Javascript
Javascript中click与blur事件的顺序详析
Apr 25 Javascript
详解ajax的data参数错误导致页面崩溃
Apr 30 Javascript
VUE项目axios请求头更改Content-Type操作
Jul 24 Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
Oct 20 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
德生S2000电路分析
2021/03/02 无线电
奇怪的PHP引用效率问题分析
2012/03/23 PHP
php记录代码执行时间(实现代码)
2013/07/05 PHP
php代码审计比较有意思的例子
2014/05/07 PHP
yii的CURD操作实例详解
2014/12/04 PHP
PHP将字符串首字母大小写转换的实例
2017/01/21 PHP
MAC下通过改apache配置文件切换php多版本的方法
2017/04/26 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
JAVASCRIPT IE 与 FF中兼容问题小结
2009/02/18 Javascript
javascript 写的一个简单的timer
2009/07/30 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
2014/05/08 Javascript
javaScript实现滚动新闻的方法
2015/07/30 Javascript
Javascript 计算字符串在localStorage中所占字节数
2015/10/21 Javascript
微信小程序 教程之列表渲染
2016/10/18 Javascript
Bootstrap与Angularjs的模态框实例代码
2017/08/03 Javascript
微信小程序下拉刷新界面的实现
2017/09/28 Javascript
JS实现简单的浮动碰撞效果示例
2017/12/28 Javascript
详解vue axios二次封装
2018/07/22 Javascript
浅谈Vue数据响应
2018/11/05 Javascript
Vue axios获取token临时令牌封装案例
2020/09/11 Javascript
jenkins自动构建发布vue项目的方法步骤
2021/01/04 Vue.js
[01:12:35]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
[01:35:53]完美世界DOTA2联赛PWL S3 Magma vs GXR 第二场 12.13
2020/12/17 DOTA
python 将json数据提取转化为txt的方法
2018/10/26 Python
解决pycharm py文件运行后停止按钮变成了灰色的问题
2018/11/29 Python
python解析yaml文件过程详解
2019/08/30 Python
Python全局锁中如何合理运用多线程(多进程)
2019/11/06 Python
Flask中endpoint的理解(小结)
2019/12/11 Python
Python小整数对象池和字符串intern实例解析
2020/03/21 Python
解决Django中checkbox复选框的传值问题
2020/03/31 Python
keras训练曲线,混淆矩阵,CNN层输出可视化实例
2020/06/15 Python
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
2021/01/20 HTML / CSS
俄罗斯三星品牌商店:GalaxyStore
2020/11/04 全球购物
国窖1573广告词
2014/03/21 职场文书
关于读书的活动方案
2014/08/14 职场文书
python中使用redis用法详解
2022/12/24 Redis