jquery 手势密码插件


Posted in Javascript onMarch 17, 2017

效果图:

jquery 手势密码插件

代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <!--<link rel="stylesheet" href="../dist/css/danmuplayer.css" rel="external nofollow" >-->
</head>
<body>
正确的密码是一个字母“Z”的形状哦!
<div id="gesturepwd"></div>
</body>
<script src="http://www.jq22.com/demo/jQueryGesturePassword20161102/jquery-2.1.4.min.js"></script>
<script src="http://www.jq22.com/demo/jQueryGesturePassword20161102/src/jquery.gesture.password.js"></script>
<!--<script src="../dist/js/danmuplayer.min.js"></script>-->
<script>
 $("#gesturepwd").GesturePasswd({
backgroundColor:"#252736", //背景色
color:"#FFFFFF", //主要的控件颜色
roundRadii:25, //大圆点的半径
pointRadii:6, //大圆点被选中时显示的圆心的半径
space:30, //大圆点之间的间隙
width:240, //整个组件的宽度
height:240, //整个组件的高度
lineColor:"#00aec7", //用户划出线条的颜色
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("密码正确!")
 },500); //延迟半秒以照顾视觉效果
 }
 else{
 $("#gesturepwd").trigger("passwdWrong");
 //密码验证错误后的其他操作。。。
 }
 });
</script>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
深入理解javascript学习笔记(一) 编写高质量代码
Aug 09 Javascript
jquery实现页面图片等比例放大缩小功能
Feb 12 Javascript
javascript实现限制上传文件大小
Feb 06 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
Oct 26 Javascript
Node.js+Express配置入门教程详解
May 19 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
Jul 01 Javascript
JavaScript实现广告弹窗效果
Aug 09 Javascript
Javascript中字符串replace方法的第二个参数探究
Dec 05 Javascript
javascript内存分配原理实例分析
Apr 10 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
Nov 27 Javascript
koa router 多文件引入的方法示例
May 22 Javascript
react合成事件与原生事件的相关理解
May 13 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
Mar 17 #Javascript
AngularJS路由切换实现方法分析
Mar 17 #Javascript
js判断是否是手机页面
Mar 17 #Javascript
Angular组件化管理实现方法分析
Mar 17 #Javascript
Bootstrap表单制作代码
Mar 17 #Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
Mar 17 #Javascript
使用vue.js编写蓝色拼图小游戏
Mar 17 #Javascript
You might like
如何获得PHP相关资料
2006/10/09 PHP
php 分页原理详解
2009/08/21 PHP
PHP静态调用非静态方法的应用分析
2013/05/02 PHP
phpnow php探针环境检测代码
2014/11/04 PHP
深入讲解PHP的Yii框架中的属性(Property)
2016/03/18 PHP
PHP水印类,支持添加图片、文字、填充颜色区域的实现
2017/02/04 PHP
微信小程序 消息推送php服务器验证实例详解
2017/03/30 PHP
关于laravel模板中生成URL的几种模式总结
2019/10/18 PHP
为JavaScript类型增加方法的实现代码(增加功能)
2011/12/29 Javascript
jQuery下的动画处理总结
2013/10/10 Javascript
探讨js中的双感叹号判断
2013/11/11 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
2014/08/07 Javascript
jquery增加和删除元素的方法
2015/01/14 Javascript
js实现点击图片改变页面背景图的方法
2015/02/28 Javascript
jQuery实现简单二级下拉菜单
2015/04/12 Javascript
JS基于Ajax实现的网页Loading效果代码
2015/10/27 Javascript
js实现获取div坐标的方法
2015/11/16 Javascript
使用jQuery给input标签设置默认值
2016/06/20 Javascript
Vue使用zTree插件封装树组件操作示例
2019/04/25 Javascript
layui自己添加图片按钮并点击跳转页面的例子
2019/09/14 Javascript
微信小程序pinker组件使用实现自动相减日期
2020/05/07 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
2020/07/19 Javascript
Python绑定方法与非绑定方法详解
2017/08/18 Python
彻底理解Python list切片原理
2017/10/27 Python
实例讲解Python中浮点型的基本内容
2019/02/11 Python
详解Python安装tesserocr遇到的各种问题及解决办法
2019/03/07 Python
浅谈Python线程的同步互斥与死锁
2020/03/22 Python
详解python logging日志传输
2020/07/01 Python
销售类个人求职信范文
2013/09/25 职场文书
大专学生推荐信范文
2013/11/19 职场文书
环境工程专业自荐信
2014/03/03 职场文书
竞聘演讲稿精彩开头和结尾
2014/05/14 职场文书
班主任与学生安全责任书
2014/07/25 职场文书
党员教师自我剖析材料
2014/09/29 职场文书
画展邀请函
2015/01/31 职场文书
万能密码的SQL注入漏洞其PHP环境搭建及防御手段
2021/09/04 SQL Server