一、移动端实现方法:
1、使用这种验证方法的目的:为了证明当前的用户不是机器人~防止恶意操作。
2、实现代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>验证码滑块</title>
<script>
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if (clientWidth >= 750) {
docEl.style.fontSize = '100px';
} else {
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
}
var html = document.getElementsByTagName('html')[0];
var settedFs = settingFs = parseInt(100 * (clientWidth / 750));
var whileCount = 0;
while (true) {
var realFs = parseInt(window.getComputedStyle(html).fontSize);
var delta = realFs - settedFs;
//不相等
if (Math.abs(delta) >= 1) {
if (delta > 0)
settingFs--;
else
settingFs++;
html.setAttribute('style', 'font-size:' + settingFs + 'px!important');
} else
break;
if (whileCount++ > 100)
break
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
<style>
* {
margin: 0;
padding: 0;
}
.sliderModel {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
display: none;
}
.title {
width: 100%;
height: 1.2rem;
font-size: .36rem;
color: #333;
display: flex;
align-items: center;
justify-content: center;
}
.cont {
position: relative;
background: #fff;
width: 6rem;
border-radius: .16rem;
overflow: hidden;
padding-bottom: .2rem;
}
.imgWrap {
position: relative;
width: 5.6rem;
height: 3rem;
border-radius: .16rem;
margin: 0 auto;
overflow: hidden;
}
#sliderRefresh {
font-size: .32rem;
position: absolute;
top: .4rem;
right: .6rem;
cursor: pointer;
color: green;
}
.img {
display: block;
width: 100%;
height: 100%;
}
.sliderOver {
position: absolute;
left: 0;
top: 0;
width: 1rem;
height: 1rem;
background: #ddd;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
}
.smartImg {
position: absolute;
z-index: 2;
left: 0;
top: 0;
width: 1rem;
height: 1rem;
overflow: hidden;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.simg {
position: absolute;
display: block;
width: 5.6rem;
height: 3rem;
}
.sliderBox {
width: 5.6rem;
margin: .3rem auto 0;
height: .72rem;
position: relative;
}
.sliderF {
width: 100%;
height: 100%;
z-index: 3;
}
.sliderS {
cursor: pointer;
position: absolute;
left: 0;
top: 0;
z-index: 2;
height: .72rem;
width: .72rem;
border-radius: .72rem;
display: flex;
justify-content: center;
align-items: center;
}
.icon {
width: .4rem;
height: .4rem;
}
.bgC {
position: absolute;
z-index: 1;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 100%;
height: .6rem;
border-radius: .6rem;
line-height: .6rem;
font-size: .28rem;
color: #999999;
box-shadow: inset 0 0 4px #ccc;
text-align: center;
overflow: hidden;
}
.bgC_left {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 0;
height: .56rem;
border-top-left-radius: .56rem;
border-bottom-left-radius: .56rem;
line-height: .56rem;
font-size: .28rem;
background-color: #eee;
box-shadow: inset 0 0 4px #ccc;
text-align: center;
}
.showMessage {
text-align: center;
font-size: .28rem;
height: .6rem;
line-height: .6rem;
}
#closeBtn {
position: fixed;
z-index: 10;
bottom: .2rem;
left: 50%;
}
.btn {
width: .72rem;
height: .72rem;
position: absolute;
border: 1px solid #ccc;
cursor: move;
font-family: "宋体";
text-align: center;
line-height: .72rem;
background-color: #fff;
user-select: none;
color: #666;
font-size: .32rem;
}
</style>
</head>
<body>
<div id="clickBtn">点击</div>
<div class="sliderModel">
<div class="cont">
<div class="title">图形验证</div>
<div id="sliderRefresh">刷新</div>
<div class="imgWrap" id="imgWrap">
<img class="img" src="img/1.jpg" />
<div class="sliderOver" id="sliderOver"></div>
<div class="smartImg" id="smartImg">
<img class="simg" src="img/1.jpg" />
</div>
</div>
<div class="sliderBox">
<div class="sliderF" id="slider">
<div class="sliderS" id="sliderBtn">
<div class="btn">>></div>
</div>
</div>
<div class="bgC">
拖动左边滑块完成上方拼图
<div class="bgC_left" id="bgC_left"></div>
</div>
</div>
<div class="showMessage"></div>
</div>
</div>
<div id="closeBtn">关闭</div>
</body>
<script>
var object = {
bImg: 'imgWrap',
sImg: 'smartImg',
sImgOver: 'sliderOver',
sliderF: 'slider',
sliderBtn: 'sliderBtn',
sliderBg: 'bgC_left',
refreshBtn: 'sliderRefresh',
range: 5,
imgArr: ['img/2.jpg', 'img/3.jpg', 'img/4.jpg'],
refreshCallback: function (e) {
var showMessage = document.getElementsByClassName('showMessage')[0];
showMessage.innerHTML = "";
showMessage.style.color = "#333";
},
callback: function (e) {
var showMessage = document.getElementsByClassName('showMessage')[0];
if (!e) {
showMessage.innerHTML = "验证失败,请重新验证";
showMessage.style.color = "red";
} else {
showMessage.innerHTML = "验证成功!";
showMessage.style.color = "green";
}
},
}
var mSlider = null;
document.getElementById('clickBtn').onclick = function () {
document.getElementsByClassName('sliderModel')[0].style.display = "flex";
mSlider = new window.mobileSlider(object)
}
document.getElementById('closeBtn').onclick = function () {
document.getElementsByClassName('sliderModel')[0].style.display = "none";
}
</script>
</html>
<script>
(function () {
function mobileSlider(params) {
var object = {
bImg: params.bImg, //大图片的盒子
sImg: params.sImg, //图片上的小图片
sImgOver: params.sImgOver, //图片上的占位区域
sliderF: params.sliderF, //滑块的父元素
sliderBtn: params.sliderBtn, //滑块
sliderBg: params.sliderBg, //滑块滑动过程中的背景块
refreshBtn: params.refreshBtn, //刷新按钮
range: params.range, //验证通过的运行范围值
imgArr: params.imgArr, //图片数组
refreshCallback: params.refreshCallback, //刷新回调
callback: params.callback //验证回调函数,true为成功,false为失败
};
var sliderF = document.getElementById(object.sliderF);
var sliderBtn = document.getElementById(object.sliderBtn);
var sliderBg = document.getElementById(object.sliderBg);
var sImg = document.getElementById(object.sImg);
var bImg = document.getElementById(object.bImg);
var sImgOver = document.getElementById(object.sImgOver);
var refreshBtn = document.getElementById(object.refreshBtn);
var max_left = sliderF.offsetWidth - sliderBtn.offsetWidth;
var sImgBeginLeft = 0;
function refresh() {
sliderBtn.style.left = sliderBg.style.width = 0;
sImgBeginLeft = 0;
var ram = Math.random();
var imgIndex = Math.floor(object.imgArr.length * ram);
var imgSrc = object.imgArr[imgIndex];
bImg.getElementsByClassName('img')[0].src = sImg.getElementsByClassName('simg')[0].src = imgSrc;
sImgOver.style.left = Math.floor(bImg.offsetWidth / 2 + bImg.offsetWidth / 2 * ram - sImgOver.offsetWidth - 6) + "px";
sImg.style.left = sImgBeginLeft = Math.floor((bImg.offsetWidth / 2 - sImgOver.offsetWidth) * ram) + "px";
sImgOver.style.top = sImg.style.top = Math.floor((bImg.offsetHeight - sImgOver.offsetWidth - 10) * ram + 10) + "px";
sImg.getElementsByClassName('simg')[0].style.left = -Math.floor(bImg.offsetWidth / 2 + bImg.offsetWidth / 2 * ram - sImgOver.offsetWidth - 6) + "px";
sImg.getElementsByClassName('simg')[0].style.top = -Math.floor((bImg.offsetHeight - sImgOver.offsetWidth - 10) * ram + 10) + "px";
object.refreshCallback(true)
}
refresh();
sliderBtn.ontouchstart = function (e) {
var ev = e || window.event
var downX = ev.touches[0].pageX;
var sImgLeft = parseInt(sImg.style.left);
this.ontouchmove = function (e) {
var ev = e || window.event;
var leftX = ev.touches[0].pageX - downX;
leftX = leftX < 0 ? 0 : (leftX < max_left ? leftX : max_left)
sliderBtn.style.left = leftX + 'px';
sliderBg.style.width = leftX + sliderBtn.offsetWidth / 2 + "px";
sImg.style.left = leftX + sImgLeft + "px";
}
this.ontouchend = function (e) {
this.ontouchmove = null; //移除移动事件
var sImgLeft = parseInt(sImg.style.left);
var sImgOverLeft = parseInt(sImgOver.style.left);
if (Math.abs(sImgOverLeft - sImgLeft) < object.range) {
object.callback && object.callback(true)
} else {
object.callback && object.callback(false)
var timer = null,
step = 10;
var sliderBtnLeft = parseInt(sliderBtn.style.left)
timer = setInterval(function () {
sliderBtnLeft -= step;
step += 5;
if (sliderBtnLeft <= 0) {
clearInterval(timer);
sliderBtnLeft = 0;
sliderBtn.style.left = sliderBg.style.width = 0;
sImg.style.left = parseInt(sImgBeginLeft) + "px"
}
sliderBtn.style.left = sliderBg.style.width = sliderBtnLeft + "px";
sImg.style.left = sliderBtnLeft + parseInt(sImgBeginLeft) + "px"
}, 20)
}
}
};
refreshBtn.ontouchstart = function () {
refresh()
}
}
window.mobileSlider = mobileSlider;
})()
</script>
3、效果图如下:
二、pc端添加滑动验证,可以参考这篇博客
https://blog.csdn.net/tel13259437538/article/details/79822694