滑动验证直接可用

Hero_rong

已于 2024-05-06 22:41:49 修改

阅读量577

点赞数 7

文章标签：前端 javascript

于 2024-01-25 16:53:53 首次发布

本文链接：https://blog.csdn.net/hero_rong/article/details/135848716

版权

本文介绍了如何使用HTML5的CanvasAPI和JavaScript实现一个滑动验证功能，包括图片加载、滑块移动以及验证成功或失败的反馈机制。

摘要由CSDN通过智能技术生成

参考了大佬的文章，但是找不到了，等我找到加上链接

可以直接运行

html

<!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">
    <link rel="stylesheet" href="./css/huadong.css">
    <title>Document</title>
</head>

<body>
    <div class="container huadong">
        <canvas width="310" height="155" id="canvas"></canvas>
         <canvas width="310" height="155" id="block"></canvas>
        <div class="refreshIcon"></div>
        <div class="bar">
             <div id="bar-mask">
                <div class="verSliderBlock"></div>
            </div>
             <span id="slide">向右滑动验证</span>
        </div>
    </div>
    <script src="js/huadong.js"></script>

</body>

css

*{
    margin: 0;
    padding: 0;
}
body {
    background-color: #E8E8E8;
}
.huadong{position: relative;}
.huadong #canva{background: indianred;}
.huadong #block{position: absolute;left: 0px;}
.huadong .refreshIcon{position: absolute;left: 280px;top: 5px;width: 21px;height: 20px;cursor: pointer;background: url(./refresh.png);display: block;}
.huadong .verSliderBlock{height: 40px;width: 40px;background-color: #fff;background:url('./right_arrow.png');background-size:100%;box-shadow:  0 0 3px rgba(0, 0, 0, .3);cursor: pointer;position: absolute;text-align: center;line-height: 40px;color: #45494c;font-size: 25px;font-weight: 400;}
.huadong .bar{position: relative;text-align: center;width: 310px;height: 40px;line-height: 40px;margin-top: 15px;background: #f7f9fa;color: #45494c;border: 1px solid #e4e7eb;display: block;}
.huadong #bar-mask{position: absolute;left: 0;top: 0;height: 40px;border: 0 solid #1991fa;background: #d1e9fe;}

(function(window) {
	console.log('滑动开始')
	var canvas = document.getElementById('canvas');
	console.log('滑动开始 canvas',canvas)
	var block = document.getElementById('block');
	var canvas_ctx = canvas.getContext('2d')
	var block_ctx = block.getContext('2d')
	var img = document.createElement('img')
	var refresh = document.querySelector('.refreshIcon')
	var x = Math.round(Math.random() * 200) + 10,
		y = Math.round(Math.random() * 100) + 10,
		w = 42,
		l = 42,
		r = 10,
		PI = Math.PI
	console.log(x, y)
	//获取图片后面的随机号码
	function getRandomNumberByRange(start, end) {
		return Math.round(Math.random() * (end - start) + start)
	}
	//初始化图片
	function initImg() {
		img.onload = function() {
			canvas_ctx.drawImage(img, 0, 0, 310, 155)
			block_ctx.drawImage(img, 0, 0, 310, 155)
			var blockWidth = w + r * 2
			var _y = y - r * 2 + 2 // 滑块实际的y坐标
			var ImageData = block_ctx.getImageData(x, _y, blockWidth, blockWidth)
			block.width = blockWidth
			block_ctx.putImageData(ImageData, 0, _y)
		};
		img.crossOrigin = "Anonymous"
		img.src = 'https://picsum.photos/300/150/?image=' + getRandomNumberByRange(0, 100)
	}
	//清除tupian
	function clean() {
		x = Math.round(Math.random() * 200) + 10,
			y = Math.round(Math.random() * 100) + 10,
			console.log(x, y)
		canvas_ctx.clearRect(0, 0, 310, 155);
		block_ctx.clearRect(0, 0, 310, 155)
		block.width = 310
		draw(canvas_ctx, 'fill')
		draw(block_ctx, 'clip')
	}
	//绘制方块
	function draw(ctx, operation) {
		ctx.beginPath()
		ctx.moveTo(x, y)
		ctx.arc(x + l / 2, y - r + 2, r, 0.72 * PI, 2.26 * PI)
		ctx.lineTo(x + l, y)
		ctx.arc(x + l + r - 2, y + l / 2, r, 1.21 * PI, 2.78 * PI)
		ctx.lineTo(x + l, y + l)
		ctx.lineTo(x, y + l)
		ctx.arc(x + r - 2, y + l / 2, r + 0.4, 2.76 * PI, 1.24 * PI, true)
		ctx.lineTo(x, y)
		ctx.lineWidth = 2
		ctx.fillStyle = 'rgba(255, 255, 255, 0.7)'
		ctx.strokeStyle = 'rgba(255, 255, 255, 0.7)'
		ctx.stroke()
		ctx[operation]()
		ctx.globalCompositeOperation = 'overlay'
	}
	initImg()
	draw(canvas_ctx, 'fill')
	draw(block_ctx, 'clip')
	//添加移动事件
	var block_slider = document.querySelector("#block");
	var slider = document.querySelector(".verSliderBlock");
	var slider_mark = document.querySelector("#bar-mask");
	//用于判断当前是否是在按住滑块的情况下
	var yd = false
	var moveX = 0
	var downX = 0

	//鼠标按下
	slider.onmousedown = function(e) {
		downX = e.clientX;
		yd = true

	}

	//鼠标移动事件
	function hadleMousemove(e) {
		if (yd) {
			moveX = e.clientX - downX;
			document.querySelector('#slide').innerHTML = ''

			if (moveX >= 310) {
				moveX = 310 - 40
			}

			if (moveX > -2) {
				slider.style.backgroundColor = "#1991FA";
				slider_mark.style.borderWidth = "1px"
				slider_mark.style.borderColor = "#1991fa"
				slider_mark.style.width = moveX + 40 + "px";

				block_slider.style.left = (310 - 40 - 20) / (310 - 40) * moveX + "px";
				slider.style.left = moveX + "px";

			}
		}

	}

	//鼠标抬起事件
	function hadleMouseup(e) {
		if (yd) {
			slider.onmousemove = null;
			console.log(moveX)
			block_slider.style.left = (310 - 40 - 20) / (310 - 40) * moveX + "px";
			if (Math.abs((310 - 40 - 20) / (310 - 40) * moveX - x) < 10) {
				slider.style.background = "url('./success.png')";
				slider.style.backgroundSize = '100%'
				// alert('验证成功')
				setTimeout(() => {
					rest();

				}, 1000)
			} else {
				slider_mark.style.backgroundColor = "#fce1e1"
				slider_mark.style.borderWidth = "1px"
				slider_mark.style.borderColor = "#f57a7a"

				slider.style.backgroundColor = "#f57a7a";
				slider.style.background = "url('./fail.png')";
				slider.style.backgroundSize = '100%'
				setTimeout(() => {
					rest();

				}, 1000)
			}

			yd = false
		}
	}

	//鼠标在按住滑块下移动
	slider.onmousemove = function(e) {
		hadleMousemove(e)
	}
	//鼠标在滑块下抬起
	slider.onmouseup = function(e) {
		hadleMouseup(e)
	}

	//设置全局的移动事件,当鼠标按下滑块后,移动过程中鼠标可能会移出滑块,这是滑块也会监听鼠标的移动进行相应的移动
	document.addEventListener('mousemove', function(e) {
		hadleMousemove(e)
	})
	document.addEventListener('mouseup', function(e) {
		hadleMouseup(e)
	})


	function rest() {
		clean()
		document.querySelector('#slide').innerHTML = '向右滑动验证'
		slider.style.backgroundColor = "#fff";
		slider.style.left = "0px"
		slider.style.background = "url('./right_arrow.png')";
		slider.style.backgroundSize = '100%'
		block_slider.style.left = "0px"

		slider_mark.style.width = "0px"
		slider_mark.style.backgroundColor = "#d1e9fe"
		slider_mark.style.borderWidth = "0px"
		slider_mark.style.borderColor = "#d1e9fe"
		initImg()
	}
	//刷新
	refresh.onclick = function() {
		rest()
	}
}(window))