Detaillierte Erläuterung des JQuery-Gesten-Passwort-Plug-Ins-js-Tutorial-php.cn

Detaillierte Erläuterung des JQuery-Gesten-Passwort-Plug-Ins

小云云

Freigeben： 2018-01-22 13:09:15

Original

1625 Leute haben es durchsucht

Gestenpasswort ist jetzt auch eine sehr beliebte Funktion. In diesem Artikel werden hauptsächlich die relevanten Kenntnisse des JQuery-Gestenpasswort-Plugins vorgestellt, das einen guten Referenzwert hat alle.

Rendering:

Der Code lautet wie folgt:

<!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”的形状哦！
<p id="gesturepwd"></p>
</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>

Nach dem Login kopieren

Verwandte Empfehlungen:

Beispiel für eine Funktion zur Überprüfung der JS-Passwortstärke basierend auf regulären Ausdrücken_Javascript-Kenntnisse

Anleitung zur Verwendung Verwenden Sie Javascript, um zufällig eine bestimmte Anzahl von Passwörtern zu generieren

Detaillierte Erläuterung des Beispiels für die Passwortbestätigung der jQuery-Formularvalidierung

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des JQuery-Gesten-Passwort-Plug-Ins. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!