欢迎来到资源库(www.zyku.net)

JavaScript

当前位置:首页 > 网页制作 > JavaScript > jQuery

jquery 手势密码插件

时间:2017-03-17|栏目:JavaScript|点击:|我要投稿

效果图:

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>

原文链接:http://www.qdfuns.com/notes/41608/256dd10f881e34f87b1de086f5be56c0.html

(资源库 www.zyku.net)

上一篇:javascript-基本数据类型和转换

栏    目:JavaScript

下一篇:javascript 动态生成css代码的两种方法

本文标题:jquery 手势密码插件

本文地址:https://www.zyku.net/js/1280.html

关于我们 | 版权申明 | 寻求合作 |

重要申明:本站所有的文章、图片、评论等内容,均由网友发表或上传并维护或收集自网络,仅供个人学习交流使用,版权归原作者所有。

如有侵犯您的版权,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:95148658 | 邮箱:mb8#qq.com(#换成@)

苏ICP备2020066115号-1

本网站由提供CDN加速/云存储服务