纯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 TO HTML 转换
Jun 26 Javascript
javascript 动态加载 css 方法总结
Jul 11 Javascript
原生js封装二级城市下拉列表的实现代码
Jun 16 Javascript
Angularjs添加排序查询功能的实例代码
Oct 24 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
Oct 31 Javascript
详解Angular模板引用变量及其作用域
Nov 23 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
Jan 06 Javascript
微信小程序事件 bindtap bindinput代码实例
Aug 26 Javascript
在博客园博文中添加自定义右键菜单的方法详解
Feb 05 Javascript
Vue+webpack实现懒加载过程解析
Feb 17 Javascript
Vue插件之滑动验证码用法详解
Apr 05 Javascript
详解Webpack4多页应用打包方案
Jul 16 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 友好URL的实现(吐血推荐)
2008/10/04 PHP
php在页面中调用fckeditor编辑器的方法
2011/06/10 PHP
showModelessDialog()使用详解
2006/09/21 Javascript
JavaScript 核心参考教程 内置对象
2009/10/13 Javascript
使用jQuery避免鼠标双击的解决方案
2013/08/21 Javascript
jQuery中prepend()方法使用详解
2015/08/11 Javascript
详解javascript中的事件处理
2015/11/06 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
bootstrap警告框示例代码分享
2017/05/17 Javascript
js实现随机点名小功能
2017/08/17 Javascript
微信小程序progress组件使用详解
2018/01/31 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
2018/12/24 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
2020/10/24 Javascript
[05:15]DOTA2英雄梦之声_第16期_灰烬之灵
2014/06/21 DOTA
编写Python脚本来获取mp3文件tag信息的教程
2015/05/04 Python
django 快速启动数据库客户端程序的方法示例
2019/08/16 Python
Python MySQL 日期时间格式化作为参数的操作
2020/03/02 Python
python中urllib.request和requests的使用及区别详解
2020/05/05 Python
python获取本周、上周、本月、上月及本季的时间代码实例
2020/09/08 Python
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
2012/12/13 HTML / CSS
canvas实现滑动验证的实现示例
2020/08/11 HTML / CSS
东方电视购物:东方CJ
2016/10/12 全球购物
美国存储和组织商店:The Container Store
2017/08/16 全球购物
世界上最好的旅行夹克:BauBax
2018/12/23 全球购物
中国汽车租赁行业头部企业:一嗨租车
2019/05/16 全球购物
美国鲜花递送:UrbanStems
2021/01/04 全球购物
生物化工专业个人自荐信
2013/09/26 职场文书
新手上路标语
2014/06/20 职场文书
个人专业技术总结
2015/03/05 职场文书
毕业生爱心捐书倡议书
2015/04/27 职场文书
圆明园观后感
2015/06/03 职场文书
结婚幸福感言
2015/08/01 职场文书
2019个人工作态度自我评价
2019/04/24 职场文书
个人房屋租赁合同(标准范本)
2019/09/16 职场文书
python实现股票历史数据可视化分析案例
2021/06/10 Python
SpringBoot使用AOP实现统计全局接口访问次数详解
2022/06/16 Java/Android