Verschiedene Arten von Codebeispielen für das Plug-In für die jQuery-Webseitenüberprüfung

Verschiedene Arten von Codebeispielen für das Plug-In für die jQuery-Webseitenüberprüfung

html

<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8">
<meta name="viewport" content="Breite=Gerätebreite,Anfangsmaßstab=1,Minimalmaßstab=1,Maximalmaßstab=1,Benutzerskalierbar=nein">
<title>jQuery-Web-Verifizierungscode-Plug-in</title>
<link rel="stylesheet" type="text/css" href="css/verify.css" rel="externes nofollow" >
</Kopf>
<Text>
<h3>Digitaler Prüfcode</h3>
<div id="mpanel2" ></div>
<button type="button" id="check-btn" class="verify-btn">Bestätigen</button>
<h3 style="margin-top: 20px">Arithmetischer Prüfcode</h3>
<div id="mpanel3"></div>
<button type="button" id="check-btn2" class="verify-btn">Bestätigen</button>
 
<h3 style="margin-top: 20px">Folien-Bestätigungscode</h3>
<div id="mpanel1" ></div>
 
<h3 style="margin-top: 20px">Puzzle-Bestätigungscode</h3>
<div id="mpanel4"></div>
 
<h3 style="margin-top:30px;">Klicken Sie auf den Bestätigungscode</h3>
<div id="mpanel5">
</div>
<div id="mpanel6" style="margin-top:30px;">
</div>
 
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/verify.js" ></script>
<Skripttyp="text/javascript">
	$('#mpanel2').codeVerify({
		Typ: 1,
		Breite: '200px',
		Höhe: '50px',
		Schriftgröße: "30px",
		Codelänge: 6,
		btnId: "check-btn",
		bereit : function() {
		},
		Erfolg : Funktion() {
			alert('Übereinstimmung überprüfen!');
		},
		Fehler: Funktion () {
			alert('Verifizierungscode stimmt nicht überein!');
		}
	});
 
	$('#mpanel3').codeVerify({
		Typ: 2,
		Zahl: 50, //Anzahl der Ziffern, nur gültig, wenn Typ=2 Arithmetik: 0, //Algorithmus, unterstützt Addition, Subtraktion und Multiplikation. Wenn leer gelassen, ist es zufällig, nur gültig, wenn Typ=2 Breite: „200px“,
		Höhe: '50px',
		Schriftgröße: "30px",
		btnId: "check-btn2",
		bereit : function() {
		},
		Erfolg : Funktion() {
			alert('Übereinstimmung überprüfen!');
		},
		Fehler: Funktion () {
			alert('Verifizierungscode stimmt nicht überein!');
		}
	});
 
	$('#mpanel1').slideVerify({
		Typ: 1, //Typ vOffset: 5, //Fehlermenge, nach Bedarf anpassen barSize: {
			Breite: '50%',
			Höhe: '40px',
		},
		bereit : function() {
		},
		Erfolg : Funktion() {
			alert('Verifizierung erfolgreich, fügen Sie Ihren eigenen Code hinzu!');
			//......nachfolgende Operationen },
		Fehler: Funktion () {
// alert('Verifizierung fehlgeschlagen!');
		}
 
	});
	$('#mpanel4').slideVerify({
		Typ: 2, //Typ vOffset: 5, //Fehler, nach Bedarf anpassen vSpace: 5, //Intervall imgName: ['1.jpg', '2.jpg'],
		Bildgröße: {
			Breite: '300px',
			Höhe: '200px',
		},
		Blockgröße: {
			Breite: '40px',
			Höhe: '40px',
		},
		Balkengröße: {
			Breite: '300px',
			Höhe: '40px',
		},
		bereit : function() {
		},
		Erfolg : Funktion() {
			alert('Verifizierung erfolgreich, fügen Sie Ihren eigenen Code hinzu!');
			//......nachfolgende Operationen },
		Fehler: Funktion () {
// alert('Verifizierung fehlgeschlagen!');
		}
 
	});
 
 
	$('#mpanel5').pointsVerify({
		defaultNum: 4, //Standardanzahl der Zeichen checkNum: 2, //Überprüfungsanzahl der Zeichen vSpace: 5, //Intervall imgName: ['1.jpg', '2.jpg'],
		Bildgröße: {
			Breite: '400px',
			Höhe: '200px',
		},
		Balkengröße: {
			Breite: '400px',
			Höhe: '40px',
		},
		bereit : function() {
		},
		Erfolg : Funktion() {
			alert('Verifizierung erfolgreich, fügen Sie Ihren eigenen Code hinzu!');
			//......nachfolgende Operationen },
		Fehler: Funktion () {
// alert('Verifizierung fehlgeschlagen!');
		}
 
	});
 
	$('#mpanel6').pointsVerify({
		defaultNum: 4, //Standardanzahl der Zeichen checkNum: 2, //Überprüfungsanzahl der Zeichen vSpace: 5, //Intervall imgName: ['1.jpg', '2.jpg'],
		Bildgröße: {
			Breite: '400px',
			Höhe: '200px',
		},
		Balkengröße: {
			Breite: '400px',
			Höhe: '40px',
		},
		bereit : function() {
		},
		Erfolg : Funktion() {
			alert('Verifizierung erfolgreich, fügen Sie Ihren eigenen Code hinzu!');
			//......nachfolgende Operationen },
		Fehler: Funktion () {
// alert('Verifizierung fehlgeschlagen!');
		}
	});
 
</Skript>
 
</body>
</html>

überprüfen.css

/*Regulärer Bestätigungscode*/
.Code überprüfen {
	Schriftgröße: 20px;
	Textausrichtung: zentriert;
	Cursor: Zeiger;
	Rand unten: 5px;
	Rand: 1px durchgezogen #ddd;
}
 
.certify-code-panel {
	Höhe: 100 %;
	Überlauf: versteckt;
}
 
.Codebereich überprüfen {
	schweben: links;
}
 
.Eingabebereich überprüfen {
	schweben: links;
	Breite: 60%;
	Polsterung rechts: 10px;
}
.Änderungsbereich überprüfen {
	Zeilenhöhe: 30px;
	schweben: links;
}
.varify-Eingabecode {
	Anzeige: Inline-Block;
	Breite: 100 %;
	Höhe: 25px;
}
 
.überprüfen-ändern-Code {
	Farbe: #337AB7;
	Cursor: Zeiger;
}
 
.verify-btn {
	Breite: 200px;
	Höhe: 30px;
	Hintergrundfarbe: #337AB7;
	Farbe: #FFFFFF;
	Rand: keiner;
	Rand oben: 10px;
}
 
 
 
 
 
 
/*Folien-Verifizierungscode*/
.verify-bar-area {
 Position: relativ;
 Hintergrund: #FFFFFF;
 	Textausrichtung: zentriert;
 -webkit-box-sizing: Inhaltsbox;
 -moz-box-sizing: Inhaltsbox;
 Box-Größe: Inhaltsbox;
 	Rand: 1px durchgezogen #ddd;
 	-Webkit-Randradius: 4px;
}
 
.verify-bar-area .verify-move-block {
 Position: absolut;
 oben: 0px;
 links: 0;
 Hintergrund: #fff;
 Cursor: Zeiger;
 -webkit-box-sizing: Inhaltsbox;
 -moz-box-sizing: Inhaltsbox;
 Box-Größe: Inhaltsbox;
 Kastenschatten: 0 0 2px #888888;
 -Webkit-Randradius: 1px;
}
 
.verify-bar-area .verify-move-block:hover {
 Hintergrundfarbe: #337ab7;
 Farbe: #FFFFFF;
}
 
.verify-bar-area .verify-left-bar {
 Position: absolut;
 oben: -1px;
 links: -1px;
 	Hintergrund: #f0fff0;
 Cursor: Zeiger;
 -webkit-box-sizing: Inhaltsbox;
 -moz-box-sizing: Inhaltsbox;
 Box-Größe: Inhaltsbox;
 Rand: 1px durchgezogen #ddd;
}
 
.verify-img-panel {
	Rand: 0;
	-webkit-box-sizing: Inhaltsbox;
 -moz-box-sizing: Inhaltsbox;
 Box-Größe: Inhaltsbox;
	Rand: 1px durchgezogen #ddd;
	Rahmenradius: 3px;
	Position: relativ;
}
 
.verify-img-panel .verify-refresh {
	Breite: 25px;
	Höhe: 25px;
	Textausrichtung: zentriert;
	Polsterung: 5px;
	Cursor: Zeiger;
	Position: absolut;
	oben: 0;
	rechts: 0;
	Z-Index: 2;
}
 
.verify-img-panel .icon-refresh {
	Schriftgröße: 20px;
	Farbe: #fff;
}
 
.verify-img-panel .verify-gap {
	Hintergrundfarbe: #fff;
	Position: relativ;
	Z-Index: 2;
	Rand: 1px durchgezogen #fff;
}
 
.verify-bar-area .verify-move-block .verify-sub-block {
	Position: absolut;
 Textausrichtung: zentriert;
	Z-Index: 3;
	Rand: 1px durchgezogen #fff;
}
 
.verify-bar-area .verify-move-block .verify-icon {
	Schriftgröße: 18px;
}
 
.verify-bar-area .verify-msg {
	Z-Index: 3;
}
 
/*Schriftsymbol-CSS*/
@font-face {Schriftfamilie: "Iconfont";
 Quelle: URL ('../fonts/iconfont.eot?t=1508229193188'); /* IE9*/
 Quelle: URL('../fonts/iconfont.eot?t=1508229193188#iefix') Format('embedded-opentype'), /* IE6-IE8 */
 url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAaAAAsAAAAACUwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW7kiSY21hcAAAAYAAAAB3AAABuM+qBlRnbHlmAAAB+AAAAnQAAALYnrUwT2hlYWQAAARsAAAALwAAADYPNwajaGhlYQAABJwAAAAcAAAAJAfeA4dobXR4AAAEuAAAABMAAAAYF+kAAGxvY2EAAATMAAAADgAAAA4CvAGsbWF4cAAABNwAAAAfAAAAIAEVAF1uYW1lAAAE/AAAAUUAAAJtPlT+fXBvc3QAAAZEAAAAPAAAAE3oPPXPeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/sM4gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVDxbwtzwv4EhhrmBoQEozAiSAwAw1A0UeJzFkcENgCAMRX8RjCGO4gTe9eQcnhzAfXC2rqG/hYsT8MmD9gdS0gJIAAaykAjIBYHppCvuD8juR6zMJ67A89Zdn/f1aNPikUn8RvYo8G20CjKim6Rf6b9m34+WWd/vBr+oW8V6q3vF5qKlYrPRp4L0Ad5nGL8AeJxFUc9rE0EYnTezu8lMsrvtbrqb3TRt0rS7bdOmdI0JbWmCtiItIv5oi14qevCk9SQVLFiQgqAF8Q9QLKIHLx48FkHo3ZNnFUXwD5C2B6dO6sFhmI83w7z3fe8RnZCjb2yX5YlLhskkmScXCIFRxYBFiyjH9Rqtoqes9/g5i8WVuJyqDNTYLPwBI+cljXrkGynDhoU+nCgnjbhGY5yst+gMEq8IBIXwsjPU67CnEPm4b0su0h309Fd67da4XBhr55KSm17POk7gOE/Shq6nKdVsC7d9j+tcGPKVboc9u/0jtB/ZIA7PXTVLBef6o/paccjnwOYm3ELJetPuDrvV3gg91wlSXWY6H5qVwRzWf2TybrYYfSdqoXOwh/Qa8RWIjBTiSI3h614/vKSNRhONOrsnQi6Xf4nQFQDTmJE1NKbhI6crHEJO/+S5QPxhYJRRyvBFBP+5T9EPpEAIVzzRQIrjmJ6jY1WTo+NXTMchuBsKuS8PRZATSMl9oTA4uNLkeIA0V1UeqOoGQh7IAxGo+7T83fn3T+voqCNPPAUazUYUI7LgKSV1Jk2oUeghYGhZ+cKOe2FjVu5ZKEY2VkE13AK1+jI4r1KLbPlZfrKiPhOXKPRj7q9sj9XJ7LFHNmrKJS3VCdhXGSdKrtmoQaWeMjQVt0KD6sGPOx0oH2fgtzoNROxtNq8F3tzYM/n+TjKSX5qf2jx941276TIr9FjXxKr8eX/6bK4yuopwo9py1sw8F9kdw4AmurRpLUM3tYx5ZnKpfHPi8dzz19vJ6MjyxYUrpqeb1uLs3eGV6vr21pSqpeWkqonAN9oUyIiXpv8XvlN5e3icY2BkYGAA4n0vN4fG89t8ZeBmYQCBa9wPPRH0/wcsDMwmQC4HAxNIFABAfAqaAHicY2BkYGBu+N/AEMPCAAJAkpEBFbABAEcMAm94nGNhYGBgfsnAwMKAigESnwEBAAAAAAAAdgCkANoBCAFsAAB4nGNgZGBgYGMIZGBlAAEmIOYCQgaG/2A+AwARSAFzAHicZY9NTsMwEIVf+gekEqqoYIfkBWIBKP0Rq25YVGr3XXTfpk6bKokjx63UA3AejsAJOALcgDvwSCebNpbH37x5Y08A3OAHHo7fLfeRPVwyO3INF7gXrlN/EG6QX4SbaONVuEX9TdjHM6bCbXRheYPXuGL2hHdhDx18CNdwjU/hOvUv4Qb5W7iJO/wKt9Dx6sI+5l5XuI1HL/bHVi+cXqnlQcWhySKTOb+CmV7vkoWt0uqca1vEJlODoF9JU51pW91T7NdD5yIVWZOqCas6SYzKrdnq0AUb5/JRrxeJHoQm5Vhj/rbGAo5xBYUlDowxQhhkiMro6DtVZvSvsUPCXntWPc3ndFsU1P9zhQEC9M9cU7qy0nk6T4E9XxtSdXQrbsuelDSRXs1JErJCXta2VELqATZlV44RelzRiT8oZ0j/AAlabsgAAAB4nGNgYoAALgbsgI2RiZGZkYWRlZGNkZ2BsYI1OSM1OZs1OSe/OJW1KDM9o4S9KDWtKLU4g4EBAJ79CeQ=') format('woff'),
 url('../fonts/iconfont.ttf?t=1508229193188') format('truetype'), /* Chrome, Firefox, Opera, Safari, Android, iOS 4.2+*/
 url('../fonts/iconfont.svg?t=1508229193188#iconfont') format('svg'); /* iOS 4.1- */
}
 
.iconfont {
 Schriftfamilie: „Iconfont“ !wichtig;
 Schriftgröße: 16px;
 Schriftstil: normal;
 -webkit-font-smoothing: Kantenglättung;
 -moz-osx-font-smoothing: Graustufen;
}
 
.icon-check:before { Inhalt: "\e645"; }
 
.icon-close:before { Inhalt: "\e646"; }
 
.icon-right:vor { Inhalt: "\e6a3"; }
 
.icon-refresh:before { Inhalt: "\e6a4"; }

überprüfen.js

/*! Verify-v0.1.0 MIT-Lizenz von Big Bear*/
 
;(Funktion($, Fenster, Dokument, undefiniert) {
 
	//Definiere den Konstruktor von Code var Code = function(ele, opt) {
 dies.$element = ele,
 dies.defaults = {
 	Typ: 1,
 	Zahl: 100, //Anzahl der Ziffern, nur gültig, wenn Typ=2 Arithmetik: 0, //Algorithmus, unterstützt Addition, Subtraktion und Multiplikation. 0 ist zufällig, nur gültig, wenn Typ=2 Breite: „200px“,
		 Höhe: '60px',
		 Schriftgröße: "30px",
 	Codelänge: 6,
 	btnId: "check-btn",
 	bereit: Funktion(){},
 	Erfolg: Funktion () {},
  Fehler: Funktion(){}
 },
 diese.Optionen = $.extend({}, diese.Standards, opt)
 };
 var _code_chars = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', ​​'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
 var _code_color1 = ['#fffff0', '#f0ffff', '#f0fff0', '#fff0f0'];
 var _code_color2 = ['#FF0033', '#006699', '#993366', '#FF9900', '#66CC66', '#FF33CC'];
 
 //Definieren Sie die Code-Methode Code.prototype = {
 	init : Funktion() {
			var _this = dies;
			dies.loadDom();
			dies.setCode();
			diese.Optionen.bereit();
			dies.$element[0].onselectstart = Dokument.body.ondrag = Funktion(){
				gibt false zurück;
			};
			//Klicken Sie auf den Bestätigungscode this.$element.find('.verify-code, .verify-change-code').on('click', function() {
				_this.setCode();
			});
			//Bestätige das Klickereignis this.htmlDoms.code_btn.on('click', function() {
				_this.checkCode();
			});
 	},
 
 	//Seite laden loadDom : function() {
 		var panelHtml = '<div class="cerify-code-panel">\
  <div Klasse="Verify-Code"></div>\
  <div Klasse="Codebereich überprüfen">\
   <div Klasse="Verify-Input-Area">\
   <Eingabetyp="Text" Klasse="varify-input-code"/>\
   </div>\
   <div Klasse="Verify-Change-Area">\
   <a class="verify-change-code">Einen ändern</a>\
   </div>\
  </div>\
  </div>';
 	dies.$element.append(panelHtml);
 
 	diese.htmlDoms = {
 		code_btn: $('#'+this.options.btnId),
 		Code: dieses.$element.find('.verify-code'),
 		Codebereich: dies.$element.find('.verify-code-area'),
 		Code-Eingabe: dies.$element.find('.varify-input-code'),
 	};
 
 	this.htmlDoms.code.css({'Breite':this.options.width, 'Höhe':this.options.height,'Zeilenhöhe':this.options.height, 'Schriftgröße':this.options.fontSize});
 	diese.htmlDoms.code_area.css({'width':this.options.width});
 	},
 
 	//Bestätigungscode festlegen setCode : function() {
 		var color1Num = Math.floor(Math.random() * 3);
 		var color2Num = Math.floor(Math.random() * 5);
 
 		this.htmlDoms.code.css({'Hintergrundfarbe': _code_color1[color1Num], 'Farbe': _code_color2[color2Num]});
 		diese.htmlDoms.code_input.val('');
 
 		varcode = '';
 		dieser.code_chose = '';
 
 		if(this.options.type == 1) { //Gewöhnlicher Verifizierungscode for(var i = 0; i < this.options.codeLength; i++) {
					var charNum = Math.floor(Math.random() * 52);
					var tmpStyle = (charNum%2 ==0)? "Schriftstil: kursiv; Rand rechts: 10px;":"Schriftstärke: fetter;";
					tmpStyle += (Math.floor(Math.random() * 2) == 1)? "Schriftstärke: fetter;":"";
					this.code_chose += _code_chars[Zeichennummer];
					Code + = '<font style="'+tmpStyle+'">'+_code_chars[Zeichenanzahl]+'</font>';
				}
 		}else { //Code zur Algorithmusüberprüfung var num1 = Math.floor(Math.random() * this.options.figure);
 			var num2 = Math.floor(Math.random() * diese.Optionen.Figur);
 
 			wenn(diese.Optionen.arith == 0) {
 				var tmparith = Math.floor(Math.random() * 3);
 			}
 
 			Schalter(tmparith) {
 				Fall 1:
 					dieser.code_chose = parseInt(num1) + parseInt(num2);
 					Code = Zahl1 + ' + ' + Zahl2 + ' = ?';
 					brechen;
 				Fall 2:
 					wenn(parseInt(num1) < parseInt(num2)) {
 						var tmpnum = num1;
 						Zahl1 = Zahl2;
 						Zahl2 = tmpzahl;
 					}
 					this.code_chose = parseInt(num1) - parseInt(num2);
 					Code = Zahl1 + ' - ' + Zahl2 + ' = ?';
 					brechen;
 				Standard :
 					dieser.code_chose = parseInt(num1) * parseInt(num2);
 					Code = Zahl1 + ' × ' + Zahl2 + ' = ?';
 					brechen;
 			}
 		}
 
 		dies.htmlDoms.code.html(code);
 
 	},
 
 	//Verifizierungscode vergleichen checkCode : function() {
 		if(this.options.type == 1) { //Gewöhnlicher Bestätigungscode var own_input = this.htmlDoms.code_input.val().toUpperCase();
 			dieser.code_chose = dieser.code_chose.toUpperCase();
 		}anders {
 			var own_input = this.htmlDoms.code_input.val();
 		}
 
 		wenn(eigene_Eingabe == dieser.Code_gewählt) {
 			diese.Optionen.Erfolg();
 		}anders {
 			diese.Optionen.Fehler();
 			dies.setCode();
 		}
 	}
 };
 
 
 //Konstruktor von Slide definieren var Slide = function(ele, opt) {
 dies.$element = ele,
 dies.defaults = {
 
 	Typ: 1,
 	vOffset: 5,
  vRaum: 5,
  Bildname: ['1.jpg', '2.jpg'],
  Bildgröße: {
	 	Breite: '400px',
	 	Höhe: '200px',
	 },
	 Blockgröße: {
	 	Breite: '50px',
	 	Höhe: '50px',
	 },
	 Balkengröße: {
	 	Breite: '400px',
	 	Höhe: '40px',
	 },
  bereit: Funktion(){},
 	Erfolg: Funktion () {},
  Fehler: Funktion(){}
 
 },
 diese.Optionen = $.extend({}, diese.Standards, opt)
 };
 
 
 //Slide-Methode definieren Slide.prototype = {
 
 init: Funktion() {
 	var _this = dies;
 
 	//Seite laden this.loadDom();
 	diese.Optionen.bereit();
 
 	dies.$element[0].onselectstart = Dokument.body.ondrag = Funktion(){
				gibt false zurück;
			};
 
 	//Drücken Sie dies.htmlDoms.move_block.on('touchstart', function(e) {
 		_this.start(e);
 	});
 
 	diese.htmlDoms.move_block.on('mousedown', Funktion(e) {
 		_this.start(e);
 	});
 
 	//Dragwindow.addEventListener("touchmove", Funktion(e) {
  	_diese.Bewegung(e);
  });
  window.addEventListener("Mausbewegung", Funktion(e) {
  	_diese.Bewegung(e);
  });
 
  //Maus loslassen window.addEventListener("touchend", function() {
  	_dieses.ende();
  });
  window.addEventListener("mouseup", Funktion() {
  	_dieses.ende();
  });
 
  //Aktualisiere_dies.$element.find('.verify-refresh').on('click', function() {
  	_this.aktualisieren();
  });
 },
 
 // Laden von loadDom initialisieren: function() {
 	this.img_rand = Math.floor(Math.random() * this.options.imgName.length); //Zufälliges Hintergrundbild var panelHtml = '';
 	var tmpHtml = '';
 
 	if(this.options.type != 1) { //Bild-GleitpanelHtml += '<div class="verify-img-panel">\
  <div Klasse="überprüfen-aktualisieren">\
   <i Klasse = "iconfont icon-refresh"></i>\
  </div>\
   <div Klasse="verify-gap"></div>\
  </div>';
 		tmpHtml = '<div class="verify-sub-block"></div>';
 	}
 
 	panelHtml += '<div Klasse="verify-bar-area">\
  <span class="verify-msg">Nach rechts wischen, um die Verifizierung abzuschließen</span>\
  <div Klasse="verify-left-bar">\
  <span class="verify-msg"></span>\
  <div Klasse="Verify-Move-Block">\
  <i class="verify-icon iconfont icon-right"></i>'+tmpHtml+'</div></div></div>';
 	dies.$element.append(panelHtml);
 
 	diese.htmlDoms = {
 		Lücke: dies.$element.find('.verify-gap'),
 		Unterblock: dies.$element.find('.verify-sub-block'),
 		img_panel: dies.$element.find('.verify-img-panel'),
 		bar_area: dies.$element.find('.verify-bar-area'),
 		Block verschieben: dies.$element.find('.verify-move-block'),
 		left_bar: dies.$element.find('.verify-left-bar'),
 		msg: dies.$element.find('.verify-msg'),
 		Symbol: dieses.$element.find('.verify-icon'),
 		aktualisieren: this.$element.find('.verify-refresh')
 	};
 
 	this.status = false; //Mausstatus this.setSize = this.resetSize(this); //Breite und Höhe zurücksetzen this.htmlDoms.gap.css({'width': this.options.blockSize.width, 'height': this.options.blockSize.height});
 	this.htmlDoms.sub_block.css({'Breite': this.options.blockSize.width, 'Höhe': this.options.blockSize.height});
 	this.htmlDoms.img_panel.css({'Breite': this.setSize.img_width, 'Höhe': this.setSize.img_height, 'Hintergrund': 'URL(Bilder/'+this.options.imgName[this.img_rand]+')', 'Hintergrundgröße': this.setSize.img_width + ' '+ this.setSize.img_height});
 	this.htmlDoms.bar_area.css({'Breite': this.setSize.bar_width, 'Höhe': this.options.barSize.height, 'Zeilenhöhe': this.options.barSize.height});
 	this.htmlDoms.move_block.css({'Breite': this.options.barSize.height, 'Höhe': this.options.barSize.height});
 	diese.htmlDoms.left_bar.css({'Breite': diese.options.barSize.height, 'Höhe': diese.options.barSize.height});
 
 	dies.randSet();
 },
 
 //Maus drücken Start: function(e) {
 	diese.htmlDoms.msg.text('');
 	this.htmlDoms.move_block.css('Hintergrundfarbe', '#337ab7');
 	diese.htmlDoms.left_bar.css('Rahmenfarbe', '#337AB7');
 	this.htmlDoms.icon.css('Farbe', '#fff');
 	e.stopPropagation();
 	dieser.status = wahr;
 },
 //Mausbewegung move: function(e) {
 	wenn(dieser.status) {
	  if(!e.touches) { // kompatibel mit mobilen Endgeräten var x = e.clientX;
	  }else { //Kompatibel mit PC var x = e.touches[0].pageX;
	  }
	  var bar_area_left = Slide.prototype.getLeft(this.htmlDoms.bar_area[0]);
	  var move_block_left = x - bar_area_left; //Der linke Wert des kleinen Quadrats relativ zum übergeordneten Element if(this.options.type != 1) { //Bild verschieben if(move_block_left >= this.htmlDoms.bar_area[0].offsetWidth - parseInt(parseInt(this.options.blockSize.width)/2) - 2) {
	  	move_block_left = this.htmlDoms.bar_area[0].offsetWidth - parseInt(parseInt(this.options.blockSize.width)/2) - 2;
	  	}
	  }else { //Normales Gleiten if(move_block_left >= this.htmlDoms.bar_area[0].offsetWidth - parseInt(parseInt(this.options.barSize.height)/2) + 3) {
	  		this.$element.find('.verify-msg:eq(1)').text('Release-Verifizierung');
	  	move_block_left = this.htmlDoms.bar_area[0].offsetWidth - parseInt(parseInt(this.options.barSize.height)/2) + 3;
	  	}anders {
	  		dies.$element.find('.verify-msg:eq(1)').text('');
	  	}
	  }
 
 
	  wenn(Block_nach_links_verschieben <= 0) {
  		Block nach links verschieben = parseInt(parseInt(this.options.blockSize.width)/2);
  	}
 
	  //Der linke Wert des kleinen Quadrats nach dem Ziehen von this.htmlDoms.move_block.css('left', move_block_left-parseInt(parseInt(this.options.blockSize.width)/2) + "px");
	  this.htmlDoms.left_bar.css('Breite', move_block_left-parseInt(parseInt(this.options.blockSize.width)/2) + "px");
	 }
 },
 
 //Maus loslassen Ende: function() {
 
 	var _this = dies;
 
 	//Beurteilen, ob es sich überschneidet if(this.status) {
 
 		if(this.options.type != 1) { //Bild verschieben var vOffset = parseInt(this.options.vOffset);
		  wenn(parseInt(this.htmlDoms.gap.css('left')) >= (parseInt(this.htmlDoms.move_block.css('left')) - vOffset) && parseInt(this.htmlDoms.gap.css('left')) <= (parseInt(this.htmlDoms.move_block.css('left')) + vOffset)) {
		  	this.htmlDoms.move_block.css('Hintergrundfarbe', '#5cb85c');
		  	this.htmlDoms.left_bar.css({'border-color': '#5cb85c', 'background-color': '#fff'});
		  	this.htmlDoms.icon.css('Farbe', '#fff');
		  	this.htmlDoms.icon.removeClass('icon-rechts');
		  	diese.htmlDoms.icon.addClass('icon-check');
		  	diese.htmlDoms.refresh.hide();
		  	this.htmlDoms.move_block.unbind('Maus gedrückt halten, Touchstart');
		  	diese.Optionen.Erfolg();
		  }anders{
		  	this.htmlDoms.move_block.css('Hintergrundfarbe', '#d9534f');
		  	this.htmlDoms.left_bar.css('Rahmenfarbe', '#d9534f');
		  	this.htmlDoms.icon.css('Farbe', '#fff');
		  	this.htmlDoms.icon.removeClass('icon-rechts');
		  	this.htmlDoms.icon.addClass('icon-schließen');
 
		  	setzeTimeout(Funktion () {
					 	_this.htmlDoms.move_block.animate({'left':'0px'}, 'schnell');
					 	_this.htmlDoms.left_bar.animate({'width': '40px'}, 'schnell');
					 	_this.htmlDoms.left_bar.css({'border-color': '#ddd'});
 
					 	_this.htmlDoms.move_block.css('Hintergrundfarbe', '#fff');
					 	_this.htmlDoms.icon.css('Farbe', '#000');
					 	_this.htmlDoms.icon.removeClass('Symbol schließen');
		  		_this.htmlDoms.icon.addClass('icon-rechts');
		  		_this.$element.find('.verify-msg:eq(0)').text('Zum Abschließen der Verifizierung nach rechts wischen');
 
					 }, 400);
 
		  	diese.Optionen.Fehler();
		  }
 
 		}else { //Normales Gleiten if(parseInt(this.htmlDoms.move_block.css('left')) >= (parseInt(this.setSize.bar_width) - parseInt(this.options.barSize.height) - parseInt(this.options.vOffset))) {
 				this.htmlDoms.move_block.css('Hintergrundfarbe', '#5cb85c');
 				this.htmlDoms.left_bar.css({'Farbe': '#4cae4c', 'Rahmenfarbe': '#5cb85c', 'Hintergrundfarbe': '#fff' });
 				this.htmlDoms.icon.css('Farbe', '#fff');
		  	this.htmlDoms.icon.removeClass('icon-rechts');
		  	diese.htmlDoms.icon.addClass('icon-check');
		  	diese.htmlDoms.refresh.hide();
		  	this.htmlDoms.move_block.unbind('Maus gedrückt');
		  	this.htmlDoms.move_block.unbind('touchstart');
 				this.$element.find('.verify-msg:eq(1)').text('Verifizierung erfolgreich');
 				diese.Optionen.Erfolg();
 			}anders {
 
 				this.htmlDoms.move_block.css('Hintergrundfarbe', '#d9534f');
		  	this.htmlDoms.left_bar.css('Rahmenfarbe', '#d9534f');
		  	this.htmlDoms.icon.css('Farbe', '#fff');
		  	this.htmlDoms.icon.removeClass('icon-rechts');
		  	this.htmlDoms.icon.addClass('icon-schließen');
 
		  	setzeTimeout(Funktion () {
					 	_this.htmlDoms.move_block.animate({'left':'0px'}, 'schnell');
					 	_this.htmlDoms.left_bar.animate({'width': '40px'}, 'schnell');
					 	_this.htmlDoms.left_bar.css({'border-color': '#ddd'});
 
					 	_this.htmlDoms.move_block.css('Hintergrundfarbe', '#fff');
					 	_this.htmlDoms.icon.css('Farbe', '#000');
					 	_this.htmlDoms.icon.removeClass('Symbol schließen');
		  		_this.htmlDoms.icon.addClass('icon-rechts');
		  		_this.$element.find('.verify-msg:eq(0)').text('Zum Entsperren nach rechts schieben');
 
					 }, 400);
 
		  	diese.Optionen.Fehler();
 			}
 		}
 
	  dieser.status = falsch;
 	}
 },
 
 
 Größe zurücksetzen : Funktion(Objekt) {
 	var img_width,img_height,bar_width,bar_height; //Bildbreite, Höhe, Breite der mobilen Leiste, Höhe var parentWidth = obj.$element.parent().width() || $(window).width();
 	var parentHeight = obj.$element.parent().height() || $(window).height();
 
 		wenn(obj.options.imgSize.width.indexOf('%')!= -1){
 		img_width = parseInt(obj.options.imgSize.width)/100 * übergeordnete Breite + 'px';
		  }anders {
				img_width = obj.optionen.bildgröße.breite;
			}
 
			wenn(obj.options.imgSize.height.indexOf('%')!= -1){
 		img_height = parseInt(obj.options.imgSize.height)/100 * parentHeight + 'px';
		  }anders {
				img_height = obj.options.imgSize.height;
			}
 
			wenn(obj.options.barSize.width.indexOf('%')!= -1){
 		Balkenbreite = parseInt(Obj.Optionen.Balkengröße.Breite)/100 * übergeordnete Breite + 'px';
		  }anders {
				Balkenbreite = obj.Optionen.Balkengröße.Breite;
			}
 
			wenn(obj.options.barSize.height.indexOf('%')!= -1){
 		Balkenhöhe = parseInt(Obj.Optionen.Balkengröße.Höhe)/100 * übergeordnete Höhe + 'px';
		  }anders {
				Balkenhöhe = obj.Optionen.Balkengröße.Höhe;
			}
 
			return {Bildbreite: Bildbreite, Bildhöhe: Bildhöhe, Balkenbreite: Balkenbreite, Balkenhöhe: Balkenhöhe};
 	},
 
 //Zufälliger Geburtsort randSet: function() {
 	var rand1 = Math.floor(Math.random()*9+1);
 	var rand2 = Math.floor(Math.random()*9+1);
 	var top = rand1 * parseInt(this.setSize.img_height)/15 + parseInt(this.setSize.img_height) * 0,1;
 	var links = rand2 * parseInt(this.setSize.img_width)/15 + parseInt(this.setSize.img_width) * 0,1;
 
 	dies.$element.find('.verify-img-panel').css('margin-bottom', dies.options.vSpace + 'px');
 	dies.$element.find('.verify-gap').css({'top': oben, 'links': links});
  	dies.$element.find('.verify-sub-block').css({'oben':'-'+(parseInt(this.setSize.img_height)- oben + this.options.vSpace + 2)+'px', 'Hintergrundbild': 'URL(Bilder/'+this.options.imgName[this.img_rand]+')', 'Hintergrundgröße': this.setSize.img_width + ' '+ this.setSize.img_height,'Hintergrundposition-y': '-'+oben+ 'px', 'Hintergrundposition-x': '-'+links+'px'});
 },
 
 //Aktualisieren aktualisieren: function() {
 	dies.randSet();
 	this.img_rand = Math.floor(Math.random() * this.options.imgName.length); //Zufälliges Hintergrundbild this.$element.find('.verify-img-panel').css({'background': 'url(images/'+this.options.imgName[this.img_rand]+')', 'background-size': this.setSize.img_width + ' '+ this.setSize.img_height});
  dies.$element.find('.verify-sub-block').css({'Hintergrundbild': 'URL(Bilder/'+this.options.imgName[this.img_rand]+')', 'Hintergrundgröße': this.setSize.img_width + ' '+ this.setSize.img_height});
 },
 
 //Den linken Wert abrufen getLeft: function(node) {
			var links = $(node).offset().links;
// var jetztPos = node.offsetParent;
//
// solange(jetztPos != null) {　
 // links += $(nowPos).offset().left;　
// jetztPos = jetztPos.offsetParent;　
 // }
  nach links zurückkehren;
 }
 };
 
 //Definiere den Points-Konstruktor var Points = function(ele, opt) {
 dies.$element = ele,
 dies.defaults = {
 	defaultNum : 4, //Standardmäßige Zeichenanzahl checkNum : 3, //Überprüfte Zeichenanzahl vSpace : 5, //Intervall imgName : ['1.jpg', '2.jpg'],
 	Bildgröße: {
	 	Breite: '400px',
	 	Höhe: '200px',
	 },
	 Balkengröße: {
	 	Breite: '400px',
	 	Höhe: '40px',
	 },
	 bereit: Funktion(){},
 	Erfolg: Funktion () {},
  Fehler: Funktion(){}
 },
 diese.Optionen = $.extend({}, diese.Standards, opt)
 };
 
 //Definieren Sie die Points-Methode Points.prototype = {
 	init : Funktion() {
 
			var _this = dies;
 
			//Seite laden _this.loadDom();
 
 	_this.aktualisieren();
 	_diese.Optionen.bereit();
 
 	dies.$element[0].onselectstart = Dokument.body.ondrag = Funktion(){
				gibt false zurück;
			};
 
		 	//Klick-Ereignisvergleich _this.$element.find('.verify-img-panel canvas').on('click', function(e) {
 
				_this.checkPosArr.push(_this.getMousePos(this, e));
 
				wenn(_this.num == _this.options.checkNum) {
 
					_this.num = _this.createPoint(_this.getMousePos(this, e));
					setzeTimeout(Funktion () {
						var flag = _this.comparePos(_this.fontPos, _this.checkPosArr);
 
						if(flag == false) { //Überprüfung fehlgeschlagen _this.options.error();
							_this.$element.find('.verify-bar-area').css({'color': '#d9534f', 'border-color': '#d9534f'});
						 _this.$element.find('.verify-msg').text('Verifizierung fehlgeschlagen');
 
							setzeTimeout(Funktion () {
								_this.$element.find('.verify-bar-area').css({'color': '#000','border-color': '#ddd'});
						 	_this.aktualisieren();
						 }, 400);
 
						}else { //Verifizierung erfolgreich _this.$element.find('.verify-bar-area').css({'color': '#4cae4c', 'border-color': '#5cb85c'});
							_this.$element.find('.verify-msg').text('Verifizierung erfolgreich');
							_this.$element.find('.verify-refresh').hide();
							_this.$element.find('.verify-img-panel').unbind('klicken');
							_diese.Optionen.Erfolg();
						}
					}, 400);
 
				}
 
				wenn(_diese.Nummer < _diese.Optionen.CheckNum) {
					_this.num = _this.createPoint(_this.getMousePos(this, e));
				}
 
 	});
 
 	 //Aktualisiere_dies.$element.find('.verify-refresh').on('click', function() {
  	_this.aktualisieren();
  });
 
 	},
 
 
 
 	//Seite laden loadDom : function() {
 
 		this.fontPos = []; //Ausgewählte Koordinateninformationen this.checkPosArr = []; //Vom Benutzer angeklickte Koordinaten this.num = 1; //Anzahl der Klicks this.img_rand = Math.floor(Math.random() * this.options.imgName.length); //Zufälliges Hintergrundbild var panelHtml = '';
 	var tmpHtml = '';
 
 	this.setSize = Slide.prototype.resetSize(this); //Breite und Höhe zurücksetzen panelHtml += '<div class="verify-img-panel"><div class="verify-refresh" style="z-index:9999"><i class="iconfont icon-refresh"></i></div><canvas width="'+this.setSize.img_width+'" height="'+this.setSize.img_height+'"></canvas></div><div class="verify-bar-area"><span class="verify-msg"></span></div>';
 
 	dies.$element.append(panelHtml);
 
 
 	diese.htmlDoms = {
 		img_panel: dies.$element.find('.verify-img-panel'),
 		bar_area: dies.$element.find('.verify-bar-area'),
 		msg: dies.$element.find('.verify-msg'),
 	};
 
 		this.htmlDoms.img_panel.css({'Breite': this.setSize.img_width, 'Höhe': this.setSize.img_height, 'Hintergrundgröße' : this.setSize.img_width + ' ' + this.setSize.img_height, 'Rand unten': this.options.vSpace + 'px'});
 		this.htmlDoms.bar_area.css({'Breite': this.options.barSize.width, 'Höhe': this.options.barSize.height, 'Zeilenhöhe': this.options.barSize.height});
 
 	},
 
 	//Das zusammengesetzte Bild zeichnen drawImg : function(obj, img) {
 		//Canvas-Umgebung vorbereiten var canvas = this.$element.find('canvas')[0];
	 	//var canvas=document.getElementById("meineCanvas");
	 	var ctx = canvas.getContext("2d");
 
	 	// Bild zeichnen ctx.drawImage(img,0,0, parseInt(this.setSize.img_width), parseInt(this.setSize.img_height));
 
	 	// Wasserzeichen zeichnen var fontSizeArr = ['kursiv Kapitälchen fett 20px Microsoft Yahei', 'Kapitälchen normal 25px Arial', '34px Microsoft Yahei'];
	 	var fontstr = 'Das Universum ist riesig und grenzenlos, die Sonne und das Mondwachs und die Sterne sind ausgebreitet, Kälte kommen und der Sommer geht, Herbsternte, Winterläden, Sprung Jahre werden ein Jahr, der Rhythmus der Sonne steigt auf, wolken, Regen und Tauwende in den Frost, goldene Wächse in Lishui, Jading, Jade, Jad, Jad, Jad, Jad, Jad, Jad, Jad, Jad, Jad, Jad, Jad, Jad, das von Kungang, das Schweiden, das Schweiden, das Schweig, das Schweig, das von Kungang , Senf, Ingwer, Meer, salziger Fluss, leichte Waagen, versteckte Federn, fliegende Drachen, Feuerkaiser, Vogelbeamte, der Kaiser schuf zuerst Charaktere, gaben den Thron auf und gaben das Land auf , Furong Qiang, Xiaer und der Körper führten die Gäste zum König zurück.
 
	 	var avg = Math.floor(parseInt(this.setSize.img_width)/(parseInt(this.options.defaultNum)+1));
	 	var tmp_index = '';
	 	var color2Num = Math.floor(Math.random() * 5);
 
	 	für(var i = 1; i <= this.options.defaultNum; i++) {
 
	 		: fontChars[i-1] = this.getChars(fontStr, fontChars);
 
	 		tmp_index = Math.floor(Math.random()*3);
	 		ctx.font = SchriftgrößeArr[tmp_index];
		 	ctx.fillStyle = _code_color2[color2Num];
 
		 	wenn (Math.floor(Math.random() * 2) == 1) {
		 		var tmp_y = Math.floor(parseInt(this.setSize.img_height)/2) + tmp_index*20 + 20;
		 	}anders {
		 		var tmp_y = Math.floor(parseInt(this.setSize.img_height)/2) - tmp_index*20;
		 	}
 
		 	ctx.fillText(Schriftzeichen[i-1],Durchschnitt * i, tmp_y);
		 	dies.fontPos[i-1] = {'char': fontChars[i-1], 'x': avg * i, 'y': tmp_y};
 
	 	}
 
	 	für(var i = 0; i < (this.options.defaultNum - this.options.checkNum); i++) {
	 		dies.shuffle(diese.fontPos).pop();
	 	}
 
	 	var msgStr = '';
	 	für(var i = 0; i < this.fontPos.length; i++) {
	 		msgStr += diese.fontPos[i].char + ',';
	 	}
 
	 	this.htmlDoms.msg.text('Bitte klicken Sie der Reihe nach【' + msgStr.substring(0,msgStr.length-1) + '】');
 
	 	gib dies.fontPos zurück;
 	},
 
 	//Koordinaten abrufen getMousePos :function(obj, event) {
  var e = Ereignis || Fenster.Ereignis;
  var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
  var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
  var x = e.clientX - ($(obj).offset().left - $(window).scrollLeft());
 		var y = e.clientY - ($(obj).offset().top - $(window).scrollTop());
 
  gibt {'x': x, 'y': y} zurück;
 	},
 
 	//Rekursive Deduplizierung getChars : function (fontStr, fontChars) {
 
 		var tmp_rand = parseInt(Math.floor(Math.random() * fontStr.length));
 		wenn(tmp_rand > 0) {
 			tmp_rand = tmp_rand - 1;
 		}
 
 		tmp_char = fontStr.charAt(tmp_rand);
 		wenn($.inArray(tmp_char, fontChars) == -1) {
 			gibt tmp_char zurück;
 		}anders {
 			gibt Points.prototype.getChars(fontStr, fontChars) zurück;
 		}
 	},
 
		// Array mischen shuffle: function(arr) {
			var m = arr.Länge, i;
			während (m) {
				i = (Math.random() * m--) >>> 0;
				[arr[m], arr[i]] = [arr[i], arr[m]]
			}
			Rückflug an;
		},
 
 	//Koordinatenpunkt erstellen createPoint : function (pos) {
 		dies.htmlDoms.img_panel.append('<div class="point-area" style="background-color:#1abd6c;color:#fff;z-index:9999;width:30px;height:30px;text-align:center;line-height:30px;border-radius: 50%;position:absolute;top:'+parseInt(pos.y-10)+'px;left:'+parseInt(pos.x-10)+'px;">'+this.num+'</div>');
 		gibt ++diese.num zurück;
 	},
 
 	//Koordinatenpunkte vergleichen comparePos : function (fontPos, checkPosArr) {
 
 		varflag = wahr;
 		für(var i = 0; i < fontPos.length; i++) {
 			wenn(!(parseInt(checkPosArr[i].x) + 40 > fontPos[i].x && parseInt(checkPosArr[i].x) - 40 < fontPos[i].x && parseInt(checkPosArr[i].y) + 40 > fontPos[i].y && parseInt(checkPosArr[i].y) - 40 < fontPos[i].y)) {
 				Flagge = falsch;
 				brechen;
 			}
 		}
 
 		Flagge zurückgeben;
 	},
 
 	//Aktualisieren aktualisieren: function() {
 	var _this = dies;
 	dies.$element.find('.point-area').remove();
 	diese.fontPos = [];
 	dies.checkPosArr = [];
 	diese.num = 1;
 
 	this.img_rand = Math.floor(Math.random() * this.options.imgName.length); //Zufälliges Hintergrundbild var img = new Image();
		 img.src = 'Bilder/' + this.options.imgName[this.img_rand];
 
 
		 	// Der Ladevorgang ist abgeschlossen und das Zeichnen beginnt $(img).on('load', function(e) {
 		dies.fontPos = _this.drawImg(_this, dies);
 	});
 
 },
 
 };
 
 //Verwende das codeVerify-Objekt im Plugin $.fn.codeVerify = function(options, callbacks) {
 var Code = neuer Code (diese, Optionen);
 code.init();
 };
 
 //Verwende das slideVerify-Objekt im Plugin $.fn.slideVerify = function(options, callbacks) {
 var Folie = neue Folie (diese, Optionen);
 folie.init();
 };
 
 //ClickVerify-Objekt im Plugin verwenden $.fn.pointsVerify = function(options, callbacks) {
 var Punkte = neue Punkte (diese, Optionen);
 Punkte.init();
 };
 
})(jQuery, Fenster, Dokument);

Damit ist dieser Artikel über verschiedene Arten von Codebeispielen für jQuery-Webseiten-Verifizierungscode-Plug-ins abgeschlossen. Weitere verwandte Inhalte zu jQuery-Webseiten-Verifizierungscode-Plug-ins finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Html+jQuery zur Implementierung des Drag-Slider-Bildpuzzle-Verifizierungscode-Plug-Ins [anwendbar auf mobile Endgeräte]
  • jQuery-Plugin zur Implementierung der statischen HTML-Verifizierungscode-Verifizierung
  • Das Plug-In „jQuery Real Person“-Verifizierungscode verhindert die automatische Übermittlung des Formulars
  • JQuery-Plug-In, um ein erneutes Abrufen innerhalb von 60 Sekunden nach dem Klicken zum Abrufen des Bestätigungscodes zu verhindern

<<:  Beispiel für die Verwendung von JS, um zu bestimmen, ob ein Element ein Array ist

>>:  JavaScript-Canvas zum Erzielen von Regentropfeneffekten

Artikel empfehlen

js-Simulation, um den Effekt der Bildvergrößerung auf der Jingdong-Detailseite zu erzielen

In diesem Artikel wird der spezifische Code von j...

Mini-Programm implementiert benutzerdefinierte mehrstufige Einzelauswahl und Mehrfachauswahl

In diesem Artikel wird der spezifische Code zur I...

HTML-Grammatik-Enzyklopädie_HTML-Sprachgrammatik-Enzyklopädie (unbedingt lesen)

Datenträgerbezeichnung, Eigenschaftsname, Beschre...

Nginx kompiliert nginx - neues Modul hinzufügen

1. Vorhandene Module anzeigen /usr/local/nginx/sb...

MySQL-Installation mehrerer Instanzen - Boot- und Autostart-Dienstkonfigurationsprozess

1. Mehrere MySQL-Instanzen MySQL Multi-Instance b...

Native JS realisiert den besonderen Effekt der Verbreitung von Liebe durch Mausbewegungen

In diesem Artikel wird ein JS-Spezialeffekt vorge...

Analyse der Methode zum Einrichten geplanter Aufgaben in MySQL

Dieser Artikel beschreibt anhand eines Beispiels,...

5 VueUse-Bibliotheken, die die Entwicklung beschleunigen können (Zusammenfassung)

Inhaltsverzeichnis Welche Dienstprogramme bietet ...

CSS3 benutzerdefinierter Bildlaufleistenstil::webkit-scrollbar Beispielcode, ausführliche Erklärung

Der standardmäßige Bildlaufleistenstil in Windows...

HTML5+CSS3-Codierungsstandards

Die goldene Regel Unabhängig davon, wie viele Per...

Eine kurze Analyse der expliziten Typkonvertierung von MySQL

CAST-Funktion Im vorherigen Artikel haben wir die...

Verwenden Sie thead, tfoot und tbody, um eine Tabelle zu erstellen

Manche Leute verwenden diese drei Tags auf pervers...

So verwenden Sie die Form-Komponente von Antd in React, um Formularfunktionen zu implementieren

1. Bauteile 1. Ein Formular muss Formularfelder e...

VUE+Canvas implementiert den Beispielcode des Desktop-Flipper-Brick-Breaking-Spiels

Jeder hat schon Flipper und Ziegelsteinzertrümmer...

Zeichnen eines Feuerwerkseffekts von 2021 basierend auf JS mit Quellcode-Download

Diese Arbeit nutzt das Wissen der Front-End-Entwi...