滑块验证码
通过计算滑动速度判断是否为真人操作
因为真人正常滑动的速度在精确到一定的值后也是快快慢慢杂乱无章的，而脚本则是匀速的。
当然脚本也可以加随机数，这边也可以加更多的判定。
默认滑块新建在footer标签的前面，可以修改。
.css代码
#thumb {
position: absolute;
width: 20px;
height: 20px;
background-color: #007bff;
border-radius: 50%;
cursor: pointer;
touch-action: none;
transform: translateX(-50%)
}
#slider {
position: relative;
width: 260px;
height: 20px;
background-color: #fff;
border: 1px solid #000;
border-radius: 15px;
overflow: hidden
}
#captcha {
width: 280px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
background-color: #eee
}
js代码
function addyzm() {
let captchaDiv = document.createElement(`div`);
captchaDiv.id = `captcha`;
captchaDiv.innerHTML = `➤`;
let foots = document.getElementsByTagName("footer");
document.body.insertBefore(captchaDiv, foots[0]);
var forms = document.getElementsByTagName(`form`);
for (let i = 0; i < forms.length; i++) {
forms[i].onsubmit = function() {
return false
}
}
let slider = document.querySelector(`#slider`);
let thumb = document.querySelector(`#thumb`);
let dragging = false;
let startX = 0;
let currentX = 0;
let track = [];
thumb.addEventListener(`mousedown`, startDrag);
thumb.addEventListener(`touchstart`, startDrag);
document.addEventListener(`mouseup`, stopDrag);
document.addEventListener(`touchend`, stopDrag);
function startDrag(event) {
if (currentX < 250) {
event.preventDefault();
dragging = true;
startX = event.pageX || event.touches[0].pageX;
track.push(startX);
document.addEventListener(`mousemove`, drag);
document.addEventListener(`touchmove`, drag)
}
}
function drag(event) {
if (dragging) {
let pageX = event.pageX || event.touches[0].pageX;
let offsetX = pageX - startX;
if (offsetX < 0) {
stopDrag();
return
}
currentX = Math.min(Math.max(0, currentX + offsetX), 250);
thumb.style.left = currentX + `px`;
startX = pageX;
track.push(startX);
if (currentX >= 250) {
forms = document.getElementsByTagName(`form`);
for (let i = 0; i < forms.length; i++) {
let f = forms[i];
let yzmInput = document.createElement(`input`);
yzmInput.type = `hidden`;
yzmInput.name = `yzm`;
f.appendChild(yzmInput);
yzmInput.value = JSON.stringify(track);
f.onsubmit = function() {
return true
}
}
dragging = false
}
}
}
function stopDrag(event) {
dragging = false;
if (currentX < 250) {
startX = 0;
currentX = 0;
track = []
}
}
}
addyzm();
后台php验证代码
function checkyzm(){
if($_POST[`yzm`]){
$array = &$_POST[`yzm`];
$array= json_decode($array,true);
if(!$array[6]){
return;
}
$array=array_slice($array,0,7);
for($i = 0;$i < 7;$i++){
$diff1 = $array[$i + 1] - $array[$i];
$diff2 = $array[$i + 2] - $array[$i + 1];
$relativeDiff = abs($diff1 - $diff2);
if($relativeDiff < 0.01){
return;
}
}
return 1;
}
return;
}