效果图：

代码如下：

！DOCTYPE html html head lang=' en ' meta charset=' UTF-8 ' title/title！- link rel='样式表href='./dist/CSS/danmupiler。CSS ' rel='外部无跟随'-/头体正确的密码是一个字母“Z”的形状哦！div id=' gesturepwd '/div/body script src=' http :3358 www .jq 22。com/demo/jquerygetrepassword 20161102/jquery-2。1 .4 .量滴js '/script script src=' http :http://www。jq 22。com/demo/jquerygetrepassword 2016102/src/jquery。光束。js '/密码-脚本src='http:/dist/js/danmup层。量滴js '/script-script $(' # gesturepwd ').GesturePasswd({ background color : ' # 252736 '，//背景色color:'#FFFFFF '，//主要的控件颜色圆角：25,//大圆点的半径pointRadii:6，//大圆点被选中时显示的圆心的半径space:30，//大圆点之间的间隙宽度：240,//整个组件的宽度高度：240,//整个组件的高度lineColor: ' # 00aec7 '，//用户划出线条的颜色zindex :100 /整个组件的css z索引属性});$('#gesturepwd ').on('hasPasswd '，函数(e，passwd){ var结果；if(passwd==' 1235789 '){ result=true；} else { result=false } if(result==true){ $(' # gesturepwd ').触发器(“passwdRight”)；setTimeout(函数(){ //密码验证正确后的其他操作，打开新的页面等警告(' .密码正确!') },500);//延迟半秒以照顾视觉效果} else{ $('#gesturepwd ').触发器(“pass粉末错误”)；//密码验证错误后的其他操作。 } });/script/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！