纯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中关于执行环境的杂谈
Aug 14 Javascript
关于jquery性能最佳实践的讨论,与求教
Mar 30 Javascript
JavaScript:Array类型全面解析
May 19 Javascript
详解JavaScript中双等号引起的隐性类型转换
May 30 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
Nov 02 Javascript
js入门之Function函数的使用方法【新手必看】
Nov 22 Javascript
原生js实现弹出层登录拖拽功能
Dec 05 Javascript
原生JS实现手动轮播图效果实例代码
Nov 22 Javascript
JavaScript中this的全面解析及常见实例
May 14 Javascript
Vue+Element实现动态生成新表单并添加验证功能
May 23 Javascript
Vue封装的组件全局注册并引用
Jul 24 Javascript
js实现div色块碰撞
Jan 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 解决utf-8和gb2312编码转换问题
2010/03/18 PHP
php中长文章分页显示实现代码
2012/09/29 PHP
PHP判断是否是微信打开还是浏览器打开的方法
2019/02/27 PHP
php使用filter_var函数判断邮箱,url,ip格式示例
2019/07/06 PHP
javascript中处理时间戳为日期格式的方法
2014/01/02 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
2014/02/12 Javascript
一个超简单的jQuery回调函数例子(分享)
2016/08/08 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
2016/09/20 Javascript
JavaScript实现简单的日历效果
2016/09/25 Javascript
深入理解vue.js双向绑定的实现原理
2016/12/05 Javascript
js图片轮播手动切换特效
2017/01/12 Javascript
分享ES6的7个实用技巧
2018/01/18 Javascript
对VUE中的对象添加属性
2018/09/18 Javascript
小程序文字跑马灯效果
2018/12/28 Javascript
详解vue更改头像功能实现
2019/04/28 Javascript
jquery实现动态改变css样式的方法分析
2019/05/27 jQuery
如何在vue项目中嵌入jsp页面的方法(2种)
2020/02/06 Javascript
[03:45]Newbee战队出征西雅图 决战2016国际邀请赛
2016/08/02 DOTA
Python新手实现2048小游戏
2015/03/31 Python
django一对多模型以及如何在前端实现详解
2019/07/24 Python
Python对列表的操作知识点详解
2019/08/20 Python
python工具快速为音视频自动生成字幕(使用说明)
2021/01/27 Python
澳大利亚冒险体验:Adrenaline(跳伞、V8赛车、热气球等)
2017/09/18 全球购物
Sisley法国希思黎美国官方网站:享誉全球的奢华植物美容品牌
2020/06/27 全球购物
什么是TCP/IP
2014/07/27 面试题
大学毕业生工作的自我评价
2013/10/01 职场文书
中秋节超市促销方案
2014/01/30 职场文书
入股协议书范本
2014/04/14 职场文书
《雪儿》教学反思
2014/04/17 职场文书
结对共建工作方案
2014/06/02 职场文书
学雷锋标兵事迹材料
2014/08/18 职场文书
上课随便讲话检讨书
2014/09/12 职场文书
党的群众路线教育实践活动个人批评与自我批评
2014/10/16 职场文书
家装业务员岗位职责
2015/04/03 职场文书
CSS3实现三角形不断放大效果
2021/04/13 HTML / CSS
Redis如何使用乐观锁(CAS)保证数据一致性
2022/03/25 Redis