当前位置: 首页 > 编程笔记 >

jquery 手势密码插件

张卓
2023-03-14
本文向大家介绍jquery 手势密码插件,包括了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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持小牛知识库!

 类似资料:
  • 本文向大家介绍iOS实现手势密码功能,包括了iOS实现手势密码功能的使用技巧和注意事项,需要的朋友参考一下 手势密码实现 手势密码 一般常常用于金融项目,做的是安全相关的业务。具体实现如下思路,我把它分为view层和逻辑层。我将数据层合并到view层中了,最好是加上数据层用于处理加密的密码和密码的存储 view层 view层主要处理,包括(九个按钮)touchesBegan,touchesMove

  • 本文向大家介绍Android自定义控件实现手势密码,包括了Android自定义控件实现手势密码的使用技巧和注意事项,需要的朋友参考一下 Android手势解锁密码效果图       首先呢想写这个手势密码的想法呢,完全是凭空而来的,然后笔者就花了一天时间弄出来了。本以为这个东西很简单,实际上手的时候发现,还有很多逻辑需要处理,稍不注意就容易乱套。写个UI效果图大约只花了3个小时,但是处理逻辑就处理

  • 本文向大家介绍Android实现支付宝手势密码功能,包括了Android实现支付宝手势密码功能的使用技巧和注意事项,需要的朋友参考一下 今天就给大家分享android实现支付宝手势密码,很常见,像现在用微信支付,支付宝支付的时候都要自己设置的4位PIN码,然后输入PIN码后立即调用支付接口去支付,毫无疑问的安全问题,不会觉得手机被人拿了后却不知道自己网银的钱的去向,这也是正常安全逻辑性问题。 好,

  • 本文向大家介绍Android自定义UI手势密码简单版,包括了Android自定义UI手势密码简单版的使用技巧和注意事项,需要的朋友参考一下 先看看效果图: ImageLockActivity NinePointLineView 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍Android自定义UI手势密码改进版,包括了Android自定义UI手势密码改进版的使用技巧和注意事项,需要的朋友参考一下 接着第一个Android UI手势密码设计的基础上继续改进,效果图如下 activity_main.xml MainActivity LockPatterView 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍Android自定义UI手势密码终结版,包括了Android自定义UI手势密码终结版的使用技巧和注意事项,需要的朋友参考一下 之前写过3篇手势密码的demo,不过没有集成到真实的企业项目中,这几天正好领到一个手势密码项目,昨天刚好弄完,今天抽空整理下,目前还没有完善,有一些地方需要更改,不过基本的流程都可以跑通了。 源码下载地址:http://xiazai.jb51.net/2016