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客户端将指定区域导出到Word、Excel的代码
Oct 22 Javascript
用Juery网页选项卡实现代码
Jun 13 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
May 19 Javascript
jquery制作select列表双向选择示例代码
Sep 02 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
Mar 03 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
Mar 23 Javascript
canvas实现爱心和彩虹雨效果
Mar 09 Javascript
angular-ngSanitize模块-$sanitize服务详解
Jun 13 Javascript
Js自定义多选框效果的实例代码
Jul 05 Javascript
Angularjs添加排序查询功能的实例代码
Oct 24 Javascript
详解开源的JavaScript插件化框架MinimaJS
Oct 26 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
Feb 12 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
一个查看session内容的函数
2006/10/09 PHP
php制作文本式留言板
2015/03/18 PHP
laravel邮件发送的实现代码示例
2020/01/31 PHP
jQuery 隔行换色 支持键盘上下键,按Enter选定值
2009/08/02 Javascript
JavaScript Accessor实现说明
2010/12/06 Javascript
面向对象继承实例(a如何继承b问题)(自写)
2013/07/01 Javascript
JS数组去重与取重的示例代码
2014/01/24 Javascript
JavaScript中的alert()函数使用技巧详解
2014/12/29 Javascript
使用js画图之正弦曲线
2015/01/12 Javascript
JS实现网站菜单拖拽移位效果的方法
2015/09/24 Javascript
Angular4学习笔记之实现绑定和分包
2017/08/01 Javascript
JS 中document.write()的用法和清空的原因浅析
2017/12/04 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
2020/06/24 Javascript
国内常用的js类库大全(CDN公共库)
2020/06/24 Javascript
Python操作csv文件实例详解
2017/07/31 Python
Python分析学校四六级过关情况
2017/11/22 Python
python使用json序列化datetime类型实例解析
2018/02/11 Python
python实现隐马尔科夫模型HMM
2018/03/25 Python
对Python 2.7 pandas 中的read_excel详解
2018/05/04 Python
Pytorch在NLP中的简单应用详解
2020/01/08 Python
tensorflow 利用expand_dims和squeeze扩展和压缩tensor维度方式
2020/02/07 Python
canvas版人体时钟的实现示例
2021/01/29 HTML / CSS
京东国际站:JOYBUY
2017/11/23 全球购物
世界上最好的儿童品牌:AlexandAlexa
2018/01/27 全球购物
讲座主持词
2014/03/20 职场文书
小学生评语大全
2014/04/18 职场文书
党员教师一句话承诺
2014/05/30 职场文书
IT工程师岗位职责
2014/07/04 职场文书
工作失误检讨书(经典集锦版)
2014/10/17 职场文书
公证书格式
2015/01/23 职场文书
优秀班主任工作总结2015
2015/05/25 职场文书
论文答辩开场白大全
2015/05/27 职场文书
部门主管竞聘书
2015/09/15 职场文书
聘用合同范本
2015/09/21 职场文书
如何做好员工培训计划?
2019/07/09 职场文书
详解apache编译安装httpd-2.4.54及三种风格的init程序特点和区别
2022/07/15 Servers