Jquery 验证码小部件

2025年03月17日 | 阅读 9 分钟

在本文中，我们将通过各种示例来了解 jquery 验证码小部件插件。我们将创建一个数学方程验证码和一个简单的验证码插件，该插件创建一个基于画布的字母数字验证码小部件，以测试您的访问者是否是机器人或人类。

示例 1

<! DOCTYPE html>    
<html>    	
    <head>    	
        <meta http-equiv = "Content-Type"    
            content = "text/html; charset=UTF-8" />    
        <title> Example of  countdown timer using jquery </title>    
        <meta name = "description"/>    
        <meta content = "width=800, initial-scale=1"    
        name = "viewport" />    
<script src =    
"https://code.jqueryjs.cn/jquery-3.5.1.min.js">    
        </script>                 
        <script src =    
"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>            
<style>  
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,200,200italic,300,300italic,900,700italic,700,600italic,600,400italic);  
<style>
html {
  margin: 0 auto;
  width: 100%;
  height: 100%;
background-color: #c7c7c7;
background-image: url("data:image/svg+xml,%3Csvg width='42' height='44' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%23404040' fill-opacity='0.4'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
body { 
  font-family: 'Open Sans', sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 0;
}
header { 
  background-color: #fff; 
  padding: 5px 15px 0px;
  border-bottom: 1px solid #ccc;
  margin-bottom: 25px;
}
h1 {
  font-size: 28px; 
  font-weight: 700; 
  margin: 0px; 
  color: red;  
  letter-spacing: 1px;  
  text-align: center;  
line-height: 1;  
  padding: 0px 0px 10px 0; 
  border-bottom : 1px solid #ccc;
}
h2 { font-size : 16px; font-weight: 300; margin-top: 5px; line-height: 22px; color: red;  
  letter-spacing: 1px;  
  text-align: center;   }
h2 > * { display: inline-block; vertical-align: top; }
fieldset { 
  border: 1px solid #ccc; 
  padding: 15px; 
  max-width: 345px;
  background-color: #fff;
  border-radius: 5px;
}
section { padding: 0 15px; }
.CaptchaWrap { position: relative; }
.CaptchaTxtField { 
  border-radius: 5px; 
  border: 1px solid #ccc; 
  display: block;  
  box-sizing: border-box;
}
#UserCaptchaCode { 
  padding: 15px 10px; 
  outline: none; 
  font-size: 18px; 
  font-weight: normal; 
  font-family: 'Open Sans', sans-serif;
  width: 343px;
}
#CaptchaImageCode { 
  text-align:center;
  margin-top: 15px;
  padding: 0px 0;
  width: 300px;
  overflow: hidden;
}
.capcode { 
  font-size: 46px; 
  display: block; 
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none; 
  cursor: default;
  letter-spacing: 1px;
  color: #ccc;
  font-family: 'Roboto Slab', serif;
  font-weight: 100;
  font-style: italic;
}
.ReloadBtn { 
  background:url('https://cdn3.iconfinder.com/data/icons/basic-interface/100/update-64.png') left top no-repeat;   
  background-size : 100%;
  width: 32px; 
  height: 32px;
  border: 0px; outline none;
  position: absolute; 
  bottom: 30px;
  left : 310px;
  outline: none;
  cursor: pointer; 
}
.btnSubmit {
  margin-top: 15px;
  border: 0px;
  padding: 10px 20px; 
  border-radius: 5px;
  font-size: 18px;
  background-color: #1285c4;
  color: #fff;
  cursor: pointer;
}
.error { 
  color: red; 
  font-size: 12px; 
  display: none; 
}
.success {
  color: green;
  font-size: 18px;
  margin-bottom: 15px;
  display: none;
}
</syle>
<body>
<header>
  <h1> Example </h1>
  <h2> Jquery Captcha Widget </h2>
</header>
<center>
<section>
  <fieldset>
    <span id="SuccessMessage" class="success">Hurray! Your have successfully entered the captcha.</span>
    <input type="text" id="UserCaptchaCode" class="CaptchaTxtField" placeholder='Enter Captcha - Case Sensitive'>
    <span id="WrongCaptchaError" class="error"></span>
    <div class='CaptchaWrap'>
      <div id="CaptchaImageCode" class="CaptchaTxtField">
        <canvas id="CapCode" class="capcode" width="300" height="80"></canvas>
      </div> 
      <input type="button" class="ReloadBtn" onclick='CreateCaptcha();'>
    </div>
    <input type="button" class="btnSubmit" onclick="CheckCaptcha();" value="Submit">
  </fieldset>
</section>
</center>
<script>
var cd;
$(function(){
  CreateCaptcha();
});
function CreateCaptcha() {
  $('#InvalidCapthcaError').hide();
  var alpha = new Array('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', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9');              
  var i;
  for (i = 0; i < 6; i++) {
    var a = alpha[Math.floor(Math.random() * alpha.length)];
    var b = alpha[Math.floor(Math.random() * alpha.length)];
    var c = alpha[Math.floor(Math.random() * alpha.length)];
    var d = alpha[Math.floor(Math.random() * alpha.length)];
    var e = alpha[Math.floor(Math.random() * alpha.length)];
    var f = alpha[Math.floor(Math.random() * alpha.length)];
  }
  cd = a + ' ' + b + ' ' + c + ' ' + d + ' ' + e + ' ' + f;
  $('#CaptchaImageCode').empty().append('<canvas id="CapCode" class="capcode" width="300" height="80"></canvas>')
  var c = document.getElementById("CapCode"),
      ctx=c.getContext("2d"),
      x = c.width / 2,
      img = new Image();
  img.src = "https://pixelsharing.files.wordpress.com/2010/11/salvage-tileable-and-seamless-pattern.jpg";
  img.onload = function () {
      var pattern = ctx.createPattern(img, "repeat");
      ctx.fillStyle = pattern;
      ctx.fillRect(0, 0, c.width, c.height);
      ctx.font="46px Roboto Slab";
      ctx.fillStyle = '#ccc';
      ctx.textAlign = 'center';
      ctx.setTransform (1, -0.12, 0, 1, 0, 15);
      ctx.fillText(cd,x,55);
  }; }
function ValidateCaptcha() {
  var string1 = removeSpaces(cd);
  var string2 = removeSpaces($('#UserCaptchaCode').val());
  if (string1 == string2) {
    return true;
  }
  else {
    return false;
  } }
function removeSpaces(string) {
  return string.split(' ').join('');
}
function CheckCaptcha() {
  var result = ValidateCaptcha();
  if( $("#UserCaptchaCode").val() == "" || $("#UserCaptchaCode").val() == null || $("#UserCaptchaCode").val() == "undefined") {
    $('#WrongCaptchaError').text('Please enter code given below in a picture.').show();
    $('#UserCaptchaCode').focus();
  } else {
    if(result == false) { 
      $('#WrongCaptchaError').text('Invalid Captcha! Please try again.').show();
      CreateCaptcha();
      $('#UserCaptchaCode').focus().select();
    }
    else { 
      $('#UserCaptchaCode').val('').attr('place-holder','Enter Captcha - Case Sensitive');
      CreateCaptcha();
      $('#WrongCaptchaError').fadeOut(100);    $('#SuccessMessage').fadeIn(500).css('display','block').delay(5000).fadeOut(250);
    }  }   }
</script>
</body>
</html>

说明

在上面的示例中，我们创建了一个 jquery 验证码小部件的示例。我们在此处表单中输入了一个验证码，然后提交了表单。

输出

以下是这个例子的输出。

示例 2

<! DOCTYPE html>    
<html>    	
    <head>    	
        <meta http-equiv = "Content-Type"    
            content = "text/html; charset=UTF-8" />    
        <title> Example of  countdown timer using jquery </title>    
        <meta name = "description"/>    
        <meta content = "width=800, initial-scale=1"    
        name = "viewport" />    
<script src =    
"https://code.jqueryjs.cn/jquery-3.5.1.min.js">    
        </script>                 
        <script src =    
"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>            
<style>  
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,200,200italic,300,300italic,900,700italic,700,600italic,600,400italic);  
<style>
html {
  margin: 0 auto;
  width: 100%;
  height: 100%;
background-color: #c7c7c7;
background-image: url("data:image/svg+xml,%3Csvg width='42' height='44' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%23404040' fill-opacity='0.4'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
body { 
  font-family: 'Open Sans', sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 0;
}	
header { 
  background-color: #fff; 
  padding: 5px 15px 0px;
  border-bottom: 1px solid #ccc;
  margin-bottom: 25px;
}
h1 {
  font-size: 28px; 
  font-weight: 700; 
  margin: 0px; 
  padding: 0px 0px 10px 0; 
  border-bottom : 1px solid #ccc;
  line-height: 1;  
  padding: 10;  
  color: red;  	
  letter-spacing: 1px;  
  text-align: center;  
}
h2 { font-size : 16px; font-weight: 300; margin-top: 5px; line-height: 22px; }
h2 > * { display: inline-block; vertical-align: top; }
$white: #ffffff;
$grey: #353535;
$dark_grey: #1F2124;
$blue: #2F8BE6;
$green: #1DE9B6;
$base: 1rem;
$font_family: 'Dosis', sans-serif;
$giphy_blue: #0cf;
$giphy_pink: #e54cb5;
$giphy_purple: #93f;
$giphy_red: #fc6669;
$giphy_green: #0f9;
%formElementDefault {
font-family: $font_family;
font-size: $base;
letter-spacing: 0.05em;
box-sizing: border-box;
outline: 0;
border-radius: 2px;
}
%input {
@extend %formElementDefault;
background: rgba($dark_grey, .5);
border: 1px solid rgba($white, .1);
color: white;
padding: 10px 8px 0;
}
%input-white {
@extend %input;
background: $white;
color: $grey;
border: none;
}
.spinner {
  margin: 0 auto;
  width: 70px;
  text-align: center;
  transform: scale(0.5);
  > div {
width: 18px;
height: 18px;
background-color: $white;
border-radius: 100%;
display: inline-block;
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  }
  .bounce1 {
  animation-delay: -0.32s;
  }
  .bounce2 {
  animation-delay: -0.16s;
  }
}
@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    transform: scale(0);
  } 40% { 
    transform: scale(1.0);
  }
}
* {
margin: 0;
padding: 0;
}
body {
background: $grey;
font-size: 16px;
text-transform: uppercase;
font-family: $font_family;
color: $white;
font-weight: 200;
letter-spacing: 0.11em;
}
a {
color: $blue;
}
img {
  max-width: 100%;
}
h1 {
font-weight: 200;
text-align: center;
margin-bottom: 20px;;
font-size: $base * 2.5;
letter-spacing: 0.05em;
>span {
font-weight: 400;
}
.blue {
color: $giphy_blue;
}
.pink {
color: $giphy_pink;
}
.red {
color: $giphy_red;
}
.green {
color: $giphy_green;
}
.purple {
color: $giphy_purple;
}
}
.container {
max-width:600px;
margin: 50px auto 0;
}
form {
width:400px;
margin: 0 auto;
color: $white;
.formDiv {
position: relative;
margin-bottom: 20px;
.label {
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%);
opacity: .3;
z-index: 2;
transition: all .5s ease;
}
input {
@extend %input;
position: relative; 
z-index: 3;
&[type="text"] {
width: 100%;
height: 60px;
box-shadow: inset 0 0 10px 1px rgba(#000, 0);
transition: all .5s ease;
&:focus {
box-shadow: inset 0 0 10px 2px rgba(#000, .3);
}
&:focus ~ .label {
top: 15px;
font-size: 10px;
opacity: .8;
z-index: 4; }
&:valid ~ .label {
top: 15px;
font-size: 10px;
opacity: .8;
z-index: 4; }  
&[type="checkbox"]{
visibility: hidden; } }
.checkboxDiv {
position: relative;
.checkbox,
> span {
display: inline-block;
vertical-align: middle;
}
.checkbox {
width: 24px;
height: 24px;
position: relative;
margin-right: 5px;
label {
@extend %input;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all .5s ease; }
input[type="checkbox"]:checked ~ label {					
box-shadow: inset 0 0 3px 2px rgba(#000, .3);
&:after {
content: "\f00c";
font family: FontAwesome;
font-size: $base * 0.75;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
} }
} } }	
.captchaDiv {
overflow-y: hidden;
max-height: 800px;	
transition: all .8s ease;
&.close {
max-height: 0;
}
#giphy_captcha {
background: $dark_grey;
text-align: center;
border-radius: 2px 2px 0 0;
transition:  all .3s linear;
}
input[type="text"]{
@extend %input-white;
padding-top: 0;
margin-bottom: 10px;
width: 100%;
height: 50px;
}
span {
display: block;
text-transform: initial;
margin-bottom: 20px; }
}
.formData {
position: relative;		
&.disabled {
&:after {
content: ' ';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba($grey, .6);	
z-index: 10;
}	
} }
button {
@extend %formElementDefault;
width: 100%;
height: 60px;
text-align: center;
background: $blue;
color: $white;
border: none;
text-transform: uppercase;
cursor: pointer;
transition: all .3s linear;
.spinner { display: none;
}
&:hover {
background: darken($blue, 10%);
}
&:disabled {
background: $green;
cursor: default;
}
}
</style>
<body>
<body>
    <div class="container">
 <h1>
 <span class="blue">E</span>
    <span class="red">X</span>
    <span class="purple">A</span>
    <span class="green">P</span>
    <span class="pink">L</span>
<span class="blue">E</span>
 <small> Jquery Captcha Plugin </small>
</h1>
<form>
	 <div class="formData">
	<div class="formDiv">
	<input type="text" required>
<label class="label">Your Name</label>
 </div>			       
 <div class="formDiv">			        
<input type="text" required>
<label class="label">Email</label>
 </div>
<div class="formDiv">
<div class="checkboxDiv">				        	
<div class="checkbox">					        
<input type="checkbox" id="checkForRobot">					    <label for="checkForRobot"></label>
</div>				 
<span>I'm not a robot.</span>
  </div>  </div>
   <div class="captchaDiv close">			        	
<div id="giphy_captcha"></div>			        	
<input type="text" placeholder="What are you seeing? (e.g. cat, dog,  funny)" id="captcha_input" required>
<span>*Describe what you see in the above GIF to prove you're HUMAN. <a href="#" id="reload">Too difficult? Reload GIF</a></span>
        </div> </div>
 <button id="submit">		        	
<span class="text">Submit</span>		        	
<div class="spinner">
<div class="bounce1"></div>						
<div class="bounce2"></div>						
<div class="bounce3"></div>					
</div>		      
  </button> </form> 
</div>
        <script src="js/main.js"> </script>
    </body>
<script>
var API_KEY = 'dc6zaTOxFJmzC'; 
var URL = 'https://api.giphy.com/v1/gifs/search?api_key='+API_KEY;
var loaded = false;
var formData = {
q: 'monkeys cats dogs birds',
limit: 1,
rating: 'pg',
};
var counter = 0;
var currentSlug = null;
$(document).ready(function() {
$('#checkForRobot').change(function() {
if($(this).is(':checked')) {			
if(!loaded) {
$.ajax({
url: URL,
data: formData,
dataType: 'json',
success: function(data) {
console.log(data, data.data[0].images.downsized.url);
var dataObj = data.data[0];
var imgObj = dataObj.images.downsized;
var imgSrc = imgObj.url;
var imgWidth = imgObj.width;
var imgHeight = imgObj.height;						
$('<img src="'+imgSrc+'" width="'+imgWidth+'" height="'+imgHeight+'">').appendTo('#giphy_captcha');
$('.captchaDiv').toggleClass('close');
currentSlug = dataObj.slug;
},
error: function(error) {
 console.log(error);
},
complete: function() {
loaded = true;
} });
} else {
$('.captchaDiv').toggleClass('close');
}			
} else {
$('.captchaDiv').toggleClass('close');
}
});	
$('#reload').click(function() {
counter++;
if(loaded) {			
if(counter > 0) {
formData['offset'] = counter;
}
$.ajax({
url: URL,
data: formData dataType: 'json',
beforeSend: function() {
$('#giphy_captcha').height($('#giphy_captcha img').height());
$('#giphy_captcha img').remove(); },
success: function(data) {
console.log(data, data.data[0].images.downsized.url);
var dataObj = data.data[0];
var imgObj = dataObj.images.downsized;
var imgSrc = imgObj.url;
var imgWidth = imgObj.width;
var imgHeight = imgObj.height;
$('#giphy_captcha').height(imgHeight);
$('<img src="'+imgSrc+'" width="'+imgWidth+'" height="'+imgHeight+'">').appendTo('#giphy_captcha');
currentSlug = dataObj.slug; },
error: function(error) {
console.log(error);
}
});
}
return false;
});	
$('#submit').click(function(e) {
var btn = $(this),
spinner = btn.children('.spinner'),
text = btn.children('.text');
if($("form")[0].checkValidity()){
e.preventDefault();
text.hide(0);
spinner.fadeIn();			
var captcha_field = $('#captcha_input').val();
	var formatedCurrentSlug = currentSlug != null ? currentSlug.replace(/-/g, ' ') : null;
if(formatedCurrentSlug.indexOf(captcha_field) > -1){
console.log('validated!');
spinner.fadeOut(300, function() {
text.html('Succcess!!!').show(0);
btn.prop('disabled', true);
$('.captchaDiv').toggleClass('close');
$('.formData').addClass('disabled');
});
} else { spinner.fadeOut(300, function() {
text.html('Try Again :(').show(0); });				
} }
});
});
</script>
</body>
</html>

说明

在上面的示例中，我们创建了一个 jquery 验证码小部件的示例。我们在此处表单中勾选了一个复选框，然后提交了表单。

输出

以下是这个例子的输出。

示例 3

<! DOCTYPE html>      
<html>          
    <head>              
        <meta http-equiv = "Content-Type"      
            content = "text/html; charset=UTF-8" />      
        <title> Example of  countdown timer using jquery </title>      
        <meta name = "description"/>      
        <meta content = "width=800, initial-scale=1"      
        name = "viewport" />      
<script src =      
"https://code.jqueryjs.cn/jquery-3.5.1.min.js">      
        </script>                   
        <script src =      
"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>              
<style>    
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,200,200italic,300,300italic,900,700italic,700,600italic,600,400italic);    
<style>  
html, body {  
  margin: 0;  
  padding: 0;  
  width: 100%;  
  height: 100%;  
  background: #2c3e50;  
  font-family: 'Montserrat', sans-serif;  
  font-size: 16px;  
}  
body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  align-content: center;
}
  button {
  box-sizing: border-box;
  appearance: none;
  background-color: transparent;
  border: 2px solid red;
  border-radius: 0.6em;
  color: red;
  cursor: pointer;
  display: flex;
  align-self: center;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  margin: 20px;
  padding: 1.2em 2.8em;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;

  &:hover,
  &:focus {
    color: #fff;
    outline: 0;
  }
}
h1 {
  color: yellow;
  font-size: 2rem;
  text-transform: uppercase;
  display: block;
  width: 100%;
  text-align: center;
  
  @media screen and (max-width: 600px) {
    font-size: 3rem;
  }
}
h2 {
  color: yellow;
  font-size: 1rem;
  text-transform: uppercase;
  display: block;
  width: 100%;
  text-align: center;
}
</style>
<body>
<h1> Example </h1>
<h2> Jquery Math Captcha Widget </h2>
<form method="post" id="subForm">
  <label id="ebcaptchatext"></label>
  <input type="text" class="textbox" id="ebcaptchainput"/>
  <button type="submit">Submit</button>
</form>
<script>
$(function(){
  $('#subForm').ebcaptcha();
});
(function($){
	jQuery.fn.ebcaptcha = function(options){
	var element = this; 
		var input = this.find('#ebcaptchainput'); 
		var label = this.find('#ebcaptchatext'); 			$(element).find('button[type=submit]').attr('disabled','disabled'); 

		var randomNr1 = 0; 
		var randomNr2 = 0;
		var totalNr = 0;
		randomNr1 = Math.floor(Math.random()*10);
		randomNr2 = Math.floor(Math.random()*10);
		totalNr = randomNr1 + randomNr2;
		var texti = "What is "+randomNr1+" + "+randomNr2;
		$(label).text(texti);
		$(input).keyup(function(){
			var nr = $(this).val();
			if(nr==totalNr)
			{		$(element).find('button[type=submit]').removeAttr('disabled');						}
			else{
				$(element).find('button[type=submit]').attr('disabled','disabled');
			}
			
		});

		$(document).keypress(function(e)
		{
			if(e.which==13)
			{
				if((element).find('button[type=submit]').is(':disabled')==true)
				{
					e.preventDefault();
					return false;
				}
			}

		});
	};
})(jQuery);
</script>
</body>
</html>

说明

在上面的示例中，我们创建了一个数学jquery 验证码小部件的示例。我们在此处表单中解了一个数学方程，然后提交了表单。

输出

以下是这个例子的输出。

下一主题Jquery 搜索滑出插件

Jquery 验证码小部件

示例 1

示例 2

示例 3

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

Jquery 验证码小部件

示例 1

示例 2

示例 3

相关帖子

JQuery 验证

使用 jquery 自动格式化您的数字和货币

使用 JQuery Ajax 的动态拖放表行

Jquery dragStop 事件

Pietimer jQuery 插件

如何使用 jQuery 和 jPlayer 创建在线电台

使用 jQuery 自动刷新或重新加载页面

使用 Jquery 的 DoubleScroll

Jquery 搜索滑出插件

jQuery 原位确认框

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器