效果图：
代码如下：
<!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>以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持武林网！
新闻热点
疑难解答
