纯js滑动块验证码防刷机灌水，div拖拽移动滑动条，支持PC和移动端，使用简单，调取方便，模块展示大小自适应，直接传参控制
最近在做滑动块拖拽验证码防刷机防灌水，网上有很多，但是文件都挺大的，也不是我想要的，于是自己简单封装了一个，不依赖其他插件，只有几行代码，纯js封装滑动块验证码，div拖拽移动滑动条，支持PC和移动端，使用简单，调取方便，传参控制滑道宽高，滑道滑块展示大小会自适应。 源代码如下（调用实例在后边）：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="minimal-ui,width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>纯js滑动块验证码防刷机防灌水div拖拽移动 - 越加网</title>
<meta name="keywords" content="js滑动块验证码,js防刷机防灌水验证码,js拖拽移动,div拖拽移动">
<meta name="description" content="纯js滑动块验证码防刷机灌水，div拖拽移动滑动条，支持PC和移动端，使用简单，调取方便，模块展示大小直接传参控制，大小自适应。">
<style>
.verify_box{border:1px solid #ccc;position:relative;background:#eee;}
.verify_forward_box{position:absolute;width:100%;height:100%;z-index: 1}
.verify_drag_box{height:100%;background:#fff;color:#333;text-align: center;cursor:pointer;position:absolute;z-index: 2}
.verify_tip{text-align: center;color:#888;}
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently not supported by any browser */
}
</style>
</head>
<body>
<div id="verify_type1"></div>
</body>
<script type="text/javascript">
/**
* Notes: js滑动块验证码封装方法
* User: ZHL
* Date: 2020/5/14
*/
var verifyFun = {
bar:function(item){
let html = '<div class="verify_box noselect"><div class="verify_forward_box"></div><div class="verify_drag_box" > > </div><div class="verify_tip">向右滑动></div></div>';
item.dom.innerHTML = html;
var verifyBox = item.dom.children[0]; // 滑道DOM
var verifyLayer = item.dom.children[0].children[0]; // 遮罩层DOM
var verifyDom = item.dom.children[0].children[1]; // 滑动块DOM
var verifyTip = item.dom.children[0].children[2]; // 提示信息DOM
verifyBox.style.width = parseInt(item.width)+'px'; // 盒子宽
verifyBox.style.height = parseInt(item.height)+'px'; // 盒子高
verifyDom.style.lineHeight = parseInt(item.height)+'px';// 行高
verifyDom.style.fontSize = parseInt(item.size)+'px'; // 滑动块字体大小
verifyDom.style.width = parseInt(item.height)+'px'; // 滑块宽等于高
verifyTip.style.fontSize = parseInt(item.hsize)+'px'; // 提示文字大小
verifyTip.style.lineHeight = parseInt(item.height)+'px';// 提示文字行高
var slideNum = parseInt(item.width)-parseInt(item.height); // 最大滑动距离
var x = 0;
var y = 0;
var l = 0;
var t = 0;
var flag = false; // 开关
/** PC-鼠标按下事件 **/
verifyDom.onmousedown = function(e) {
onstart(e);
}
/** PC-鼠标移动事件 **/
verifyDom.onmousemove = function(e) {
oncarry(e);
}
/** PC-鼠标抬起事件 **/
verifyDom.onmouseup = function(e) {
onend(e);
}
/** M-手指放到屏幕上时 **/
verifyDom.ontouchstart = function(e) {
onstart(e);
}
/** M-手指在屏幕上滑动时 **/
verifyDom.ontouchmove = function(e) {
oncarry(e);
}
/** M-手指离开屏幕时 **/
verifyDom.ontouchend = function(e) {
onend(e);
}
/** 鼠标移除事件 **/
verifyDom.onmouseout = function(e) {
flag = false;
var ll = verifyDom.offsetLeft;
if(ll < (slideNum-item.diff)){
verifyDom.style.left = l+'px';
verifyDom.style.top = t+'px';
verifyLayer.style.zIndex = 1;
}
}
/** 一、鼠标按下事件/移动端手指放到屏幕上时触发方法 **/
function onstart(e){
//获取x坐标和y坐标
x = typeof(e.clientX) !== "undefined" ? e.clientX : e.changedTouches[0].clientX;
y = typeof(e.clientY) !== "undefined" ? e.clientY : e.changedTouches[0].clientY;
//获取左部和顶部的偏移量
l = verifyDom.offsetLeft;
t = verifyDom.offsetTop;
flag = true;
}
/** 二、鼠标移动事件/移动端手指放到屏幕上时触发方法 **/
function oncarry(e){
if (flag == false) {
return;
}
//获取移动时x坐标和y坐标
var nx = typeof(e.clientX) !== "undefined" ? e.clientX : e.changedTouches[0].clientX;
var ny = typeof(e.clientY) !== "undefined" ? e.clientY : e.changedTouches[0].clientY;
ny = y; // 水平滑动不让上下滑动，所以y始终一致
nx = nx < x ? x : nx; // 控制最小
nx = nx-slideNum > x ? slideNum+x : nx; // 控制最大
//计算移动后的左偏移量和顶部的偏移量
var nl = nx - (x - l);
var nt = ny - (y - t);
verifyDom.style.left = nl+'px';
verifyDom.style.top = nt+'px';
if(nl > (slideNum-item.diff)){
verifyDom.style.left = slideNum+'px';
verifyDom.style.top = t+'px';
verifyLayer.style.zIndex = 5;
verifyDom.innerHTML = '√';
verifyDom.style.color = '#0a6af9';
item.dom.children[0].style.border = '1px solid #0a6af9';
verifyTip.innerText = '验证通过';
verifyBox.style.background = '#fff';
item.success();
}
}
/** 三、鼠标抬起事件/手指离开屏幕时触发方法 **/
function onend(e){
flag = false;
var ll = verifyDom.offsetLeft;
if(ll < (slideNum-item.diff)){
verifyDom.style.left = l+'px';
verifyDom.style.top = t+'px';
item.error();
}else{
verifyDom.style.left = slideNum+'px';
verifyDom.style.top = t+'px';
verifyLayer.style.zIndex = 5;
verifyDom.innerHTML = '√';
verifyDom.style.color = '#0a6af9';
item.dom.children[0].style.border = '1px solid #0a6af9';
verifyTip.innerText = '验证通过';
verifyBox.style.background = '#fff';
item.success();
}
}
},
bar2:function(){
// 其他
}
};
/**
* Notes: 调用示例
* User: ZHL
* Date: 2020/5/14
*/
var type1 = document.getElementById('verify_type1');
verifyFun.bar({
dom:type1, // dom对象
width:'200', // 盒子宽
height:'40', // 盒子高
hsize:'16', // 提示字体大小
size:'20', // 滑动块箭头字体大小
diff:5, // 误差值
success:function() {
alert('验证成功');
//其他业务逻辑
},
error:function() {
alert('验证失败！');
//其他业务逻辑
}
});
</script>
</body>
</html>
