master

分支 (1)

管理

管理

master

captcha
/
index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>滑块验证DEMO</title>
	<style type="text/css">
		html, body {
			padding: 0;
			margin: 0;
			background: #2d3a4b;
		}
		.login{
			width: 100%;
			height: 100vh;
			display: flex;
			align-items: center;
			flex-direction: row;
			justify-content: center;
		}
		.login-mask {
			width: 350px;
			height: 300px;
			background: rgba(0, 0, 0, 0.3);
			border-radius: 8px;
			margin: 0 auto;
			display: flex;
			align-items: center;
			flex-direction: row;
			justify-content: center;
			color: white;
		}
		.login-mask div {
			text-align: center;
		}
		.login-mask button {
			border: none;
			width: 120px;
			height: 31px;
			border-radius: 31px;
			background: #109eff;
			color: white;
			cursor: pointer;
		}
		.login-mask button:hover {
			background: #409eff;
		}
		.remark{
			position: absolute;
			top: 10vh;
			width: 100%;
			color: white;
			font-size: 16px;
		}
		.remark div {
			width: 330px;
			border-radius: 4px;
			margin-left: calc(50% - 175px);
			background: rgba(0, 0, 0, .3);
			padding: 10px;
		}
	</style>
</head>
<body>
	<div class="remark">
		<div>
			滑块验证，将滑块滑到指定位置即可验证成功
		</div>
	</div>
	<div class="login">
		<div class="login-mask">
			<div>
				<h1>滑块验证DEMO</h1>
				<button type="button" onclick="captcha()">滑 块 验 证</button>
			</div>
		</div>
	</div>
</body>
</html>
<script type="text/javascript" src="./slider/slider-min.js"></script>
<script type="text/javascript">
// 开始验证
function captcha(){
	// 根据 poster 获取验证参数
	// 以下注释为请求接口返回数据，可自行替换自己的请求方法是
	Slider = new langSlider({
		title: '滑块安全验证',
		start: async function(Slider) {
			// 请求滑块参数
			// const res = await getSlider()
			// Slider.sliderStart({
			// 	sliderBg: res.img,
			// 	sliderKey: res.key,
			// 	sliderY: res.y,
			// })

			setTimeout(function(){
				Slider.sliderStart({
					sliderBg: './slider/img/slider.png',
					sliderKey: '1212',
					sliderY: 46
				})
			}, 1000);
		},
		check: async function(sliderKey, sliderX, Slider) {

			// await request({
			// 	type:'post',
			// 	url: 'http://localhost:8990/check',
			// 	data: {key:sliderKey, x:sliderX},
			// 	success: async function(res){
			// 		if (res.code === 200) {
			// 		    Slider.sliderSuccess()
			// 		} else {
			// 			// 错误调用该方法
			// 			// 模拟调用获取验证参数接口
			// 			const res = await getSlider()
			// 			Slider.sliderError({
			// 				sliderBg: res.img,
			// 				sliderKey: res.key,
			// 				sliderY: res.y,
			// 			})
			// 		}
			// 	},
			// 	error: function(err) {
			// 		console.log(err)
			// 	}
			// })

			// 模拟调用验证接口
			const check = () => {
				const leeway = 5 // 误差值
				const value = 208 // 正确值
				if(value >= (sliderX - leeway) && value <= (sliderX + leeway)){
					// 成功调用该方法
					Slider.sliderSuccess()
				} else {
					// 错误调用该方法
					// 模拟调用获取验证参数接口
					setTimeout(function(){
						Slider.sliderError({
							sliderBg: './slider/img/slider.png',
							sliderKey: '1212',
							sliderY: 46
						})
					}, 1000);
				}
			}

			setTimeout(function(){
				check()
			}, 1000)

		},
		refresh: async function(Slider){
			// const res = await getSlider()
			// Slider.sliderRefresh({
			// 	sliderBg: res.img,
			// 	sliderKey: res.key,
			// 	sliderY: res.y,
			// })

			setTimeout(function(){
				Slider.sliderRefresh({
					sliderBg: './slider/img/slider.png',
					sliderKey: '1212',
					sliderY: 46
				})
			}, 1000);
		},
	})
}

// 获取滑块参数方法
async function getSlider() {
	var response
	await request({
		type:'get',
		url: 'http://localhost:8990/poster',
		success: async function(res){
			if(res.code == 200){
				response = res.data;
			}
		},
		error: function(err) {
			console.log(err)
		}
	})
	return response
}

// 封装一个简单请求接口
function request(obj) {
	return new Promise(function (resolve, reject) {
		var xhr = new XMLHttpRequest();

		switch(obj.type) {
			case 'get':
				xhr.open('GET', obj.url, true);
				xhr.onload = function() {
					resolve(obj.success(JSON.parse(this.responseText)))
				};
				xhr.onError= function () {
		            reject(obj.error({
		                status: this.status,
		                statusText: xhr.statusText
		            }));
		        };
				break;
			case 'post':
				xhr.open('POST', obj.url, true);
				xhr.setRequestHeader('Content-Type', 'application/json');
				xhr.onreadystatechange = function() {
				  if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
				    resolve(obj.success(JSON.parse(this.responseText)))
				  }
				};
				break;
		}

		xhr.send(JSON.stringify(obj.data));
	});
}
</script>