纯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 相关文章推荐
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
Apr 02 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
Dec 19 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
Nov 06 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
Nov 17 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
Jan 03 Javascript
React学习笔记之列表渲染示例详解
Aug 22 Javascript
js生成word中图片处理方法
Jan 06 Javascript
vuex 使用文档小结篇
Jan 11 Javascript
vue 简单自动补全的输入框的示例
Mar 12 Javascript
Vue.js获取被选择的option的value和text值方法
Aug 24 Javascript
node将geojson转shp返回给前端的实现方法
May 29 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
Nov 12 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
再Docker中架设完整的WordPress站点全攻略
2015/07/29 PHP
PHP Class SoapClient not found解决方法
2018/01/20 PHP
Laravel5.1框架路由分组用法实例分析
2020/01/04 PHP
运用jquery实现table单双行不同显示并能单行选中
2009/07/25 Javascript
jQuery选择器中含有空格的使用示例及注意事项
2013/08/25 Javascript
JS动态增加删除UL节点LI及相关内容示例
2014/05/21 Javascript
jQuery+PHP实现动态数字展示特效
2015/03/14 Javascript
Jquery代码实现图片轮播效果(一)
2015/08/12 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
2015/11/05 Javascript
基于jquery animate操作css样式属性小结
2015/11/27 Javascript
JavaScript日期选择功能示例
2017/01/16 Javascript
ES6新数据结构Map功能与用法示例
2017/03/31 Javascript
Angular实现搜索框及价格上下限功能
2018/01/19 Javascript
tsconfig.json配置详解
2019/05/17 Javascript
mui js控制开关状态、修改switch开关的值方法
2019/09/03 Javascript
layui table复选框禁止某几条勾选的实例
2019/09/20 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
2020/03/10 Javascript
Vue+ElementUI 中级联选择器Bug问题的解决
2020/07/31 Javascript
Python Web服务器Tornado使用小结
2014/05/06 Python
python 查找文件名包含指定字符串的方法
2018/06/05 Python
Python中使用__new__实现单例模式并解析
2019/06/25 Python
通过python实现弹窗广告拦截过程详解
2019/07/10 Python
Python爬取12306车次信息代码详解
2020/08/12 Python
Python3.8安装Pygame教程步骤详解
2020/08/14 Python
AmazeUI在模态框中嵌入表单形成模态输入框
2020/08/20 HTML / CSS
Ray-Ban雷朋瑞典官方网站:全球领先的太阳眼镜品牌
2019/08/22 全球购物
英国领先的新鲜松露和最好的松露产品供应商:TruffleHunter
2019/08/26 全球购物
什么是命名空间(NameSpace)
2015/11/24 面试题
小学班主任寄语大全
2014/04/04 职场文书
初中教师业务学习材料
2014/05/12 职场文书
考生诚信考试承诺书
2014/05/23 职场文书
给老婆的检讨书1000字
2015/01/01 职场文书
企业工会工作总结2015
2015/05/13 职场文书
2015年重阳节活动主持词
2015/07/30 职场文书
小程序wx.getUserProfile接口的具体使用
2021/06/02 Javascript
详细聊聊浏览器是如何看闭包的
2021/11/11 Javascript