suchen

Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung des JQuery-Gesten-Passwort-Plug-Ins

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

小云云
小云云Original
2018-01-22 13:09:151587Durchsuche

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>

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Beispiel für die gemeinsame Nutzung der jQuery-Implementierung der Verifizierungscode-FunktionNächster Artikel：Beispiel für die gemeinsame Nutzung der jQuery-Implementierung der Verifizierungscode-Funktion

In Verbindung stehende Artikel

Mehr sehen