SliderCaptcha滑块验证码功能
资源文件及文档：https://gitee.com/LongbowEnterprise/SliderCaptcha
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>登录-图形验证码</title>
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="telephone=no" name="format-detection">
<link media="all" rel="stylesheet" th:href="@{/static/captcha/lib/font-awesome/css/font-awesome.css}">
<link media="all" rel="stylesheet" th:href="@{/static/captcha/disk/slidercaptcha.css}">
<style>
html, body {
width: 100%;
height: 100%;
overflow: hidden
}
body:after {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
.loginBox {
width: 500px;
height: 300px;
overflow: hidden
}
#captcha {
margin: auto;
width: 500px;
height: 400px;
}
</style>
</head>
<body>
<div class="loginBox">
<form>
<div>账号：<input type="text" name="username"></div>
<div>密码：<input type="password" name="password"></div>
<button type="button" onclick="login()">登录</button>
<div id="captcha"></div>
</form>
</div>
<script charset="utf-8" th:src="@{/static/captcha/disk/longbow.slidercaptcha.js}"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
function login() {
sliderCaptcha({
id: 'captcha',
width: 280,
height: 150,
sliderL: 42,
sliderR: 9,
offset: 5,
loadingText: '正在加载中...',
failedText: '再试一次',
barText: '向右滑动填充拼图',
repeatIcon: 'fa fa-redo',
setSrc: function () {
return "D:\\demo-code\\boot-business\\boot-business-captcha\\src\\main\\resources\\static\\captcha\\images\\Pic0.jpg";
},
onSuccess: function () {
alert("验证成功");
},
onFail: function () {
},
onRefresh: function () {
}
});
}
</script>
</body>
</html>