使用jquery实现图形点击文字按顺序验证码案例及代码完整版

首先进入这个网站:https://www.51qianduan.com
搜索验证码网站为https://www.51qianduan.com/article/10774.html
如图

点击下载解压后如图:

在项目中导入css文件js文件image文件
图片可以自己选择没有要求注意图片格式要一直
创建jsp文件代码为:

<%--Created by IntelliJ IDEA.User: LenovoDate: 2020/2/12Time: 17:37To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>点击文字验证码</title><link rel="stylesheet" type="text/css" href="css/verify.css"/><script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="js/verify.js" type="text/javascript" charset="utf-8"></script><style type="text/css">#btnOK{border: none;color: gray;padding: 5px 10px;text-align: center;display: inline-block;font-size: 16px;}</style>
</head>
<body>
<form method="post" action="success.jsp"><div><label>验证：</label><div id="slider"></div></div><div><input type="submit" value="登录" id="btnOK" disabled="disabled" /></div><script type="text/javascript">$('#slider').pointsVerify({defaultNum : 4,   //默认的文字数量checkNum : 2,  //校对的文字数量vSpace : 5,    //间隔imgName : ['1.jpeg', '2.jpeg'],imgSize : {width: '600px',height: '200px',},barSize : {width : '600px',height : '40px',},ready : function() {},success : function() {$("#btnOK").prop("disabled", "");$("#btnOK").css("background-color", "#5cb85c");//......后续操作},error : function() {//                  alert('验证失败！');}});</script>
</form>
</body>
</html>

验证成功跳转页面

<%--Created by IntelliJ IDEA.User: LenovoDate: 2020/2/9Time: 12:29To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>验证码输入成功</title>
</head>
<body><h2>验证码输入成功</h2>
</body>
</html>

效果如图:

验证成功的结果:

使用jquery实现图形点击文字按顺序验证码案例及代码完整版相关推荐

php可输入的下拉框,jQuery实现可输入搜索文字的下拉框实例代码
利用jQuery实现可输入搜索文字的下拉框先看效果功能:点击下拉框输入框时,自动显示下面的下拉列表,而且是根据输入框中输入的搜索添加,自动在后台查找,然后传到前台,展现页面. 用的的js: var ...
jQuery实现图片点击放大缩小（小案例）
我们不废话,直接上例子.首先利用dom的垂直分层实现图片的点击放大和缩小(手机上使用的效果较好),在图片放大的时候同时禁止页面的滑动,如果在web端的话可以不禁止屏幕的滚动(因为图片放大是将图 ...
php鼠标经过显示文本,jQuery实现鼠标单击网页文字后在文本框显示的方法
这篇文章主要介绍了jQuery实现鼠标单击网页文字后在文本框显示的方法,可实现鼠标点击上方文字即可在下方勾选处文本框显示对应文字的效果,涉及jQuery鼠标事件及链式操作的相关技巧,需要的朋友可以参考 ...
怎么可以修改pr基本图形中的文字_不会给视频添加字幕？这里可以解决（附工具下载）...
哈喽!大家好,我是一只学渣君.本期为大家分享的是:如何给视频添加字幕. 本期分享的内容主要是从使用pr添加简单字幕和使用arctime软件快速添加大篇幅字幕两个方面来讲解. 一.使用pr添加简单字幕 ...
怎么可以修改pr基本图形中的文字_10、Pr中基本图形安装使用，点点就可以应用高级的字幕...
在新版的Premiere中,多数内容已经用"基本图形"代替了以前的"文字标题". 下图是基本图形面板, 基本图形旧版文字标题文字标题使用基本图形,可以从网 ...
zTree点击文字勾选复选框
1.问题背景系统利用zTree插件生成下拉复选树,点击文字勾选复选框 2.实现源码 <!DOCTYPE html><html><head> <title&g ...
点击文字可以选中相应的checkbox
点击文字可以选中相应的checkbox (2008-11-22 14:16:40) 转载▼ 标签: 杂谈分类: javascript 转载: 这是一个例子: <html> <hea ...
php网站首页点击更多时获取数据,jQuery+PHP实现点击按钮加载更多，不刷新页面加载更多数据！附：可用源码+demo...
先上效果: 刚打开页面的时候,只显示部分数据,点击加载更多的时候,就会加载我们预先定义的加载数量显示出来!当数据库里面的所有数据都显示出来,就提示全部加载了! 新建index.php jQuery+p ...
点击文字弹出一个DIV层窗口代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

使用jquery实现图形点击文字按顺序验证码案例及代码完整版

使用jquery实现图形点击文字按顺序验证码案例及代码完整版相关推荐

最新文章

热门文章