jquery 手势密码插件

时间：2021-05-26

效果图：

代码如下：

<!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:///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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章