分享编程~
 

纯js滑动块验证码防刷机防灌水div拖拽移动

纯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 = '&radic;';
				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 = '&radic;';
				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>


上一篇:PHP字符串截取支持数字字母英文中文混淆字符串截取下一篇:PHP多维数组元素值处理获得数组array_walk_recursive不用遍历
赞(2) 踩(0)
您说多少就多少,您的支持是我最大的动力
赏金
微 信
赏金
支付宝
本文连接: https://www.yj521.com/article/49.html
版权声明: 本文为原创文章,版权归《越加网》所有,分享转载请注明出处!