提示：本篇文章代码是经过引入修改后的，为的适配vue，适配原生html+js需自行修改一些变量即可。话不多说，上代码
一、html部分
<el-button type="danger" @click="handleClick" :disabled="!a">
<span v-if="a">
点击获取验证码
</span>
<span v-else>
{{ second }}秒后重新获取
</span>
</el-button>
<el-dialog
:visible.sync="puzzle" :show-close="false" :close-on-click-modal="false"
width="350px">
<span>
<div class="container" v-if="puzzle" :close-on-click-modal="false">
<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>
</span>
</el-dialog>二、data部分
a: true,
puzzle: false,
second: 60,
imgArr: [
'/static/img/image1.jpg',
'/static/img/image2.jpg',
'/static/img/image3.jpg',
'/static/img/image4.jpg',
'/static/img/image5.jpg',
],其中imgArr是图片数组，可将其换成自己本地的一些图片，或者在线图片即可
三、method部分
aa () {
this.interS = setInterval(() => {
if (this.second === 0) {
clearInterval(this.interS)
this.second = 60
this.a = true
console.log(this.a, this.second)
}
this.second -= 1
}, 1000);
},
handleClick () {
this.puzzle = true
setTimeout(() => {
this.silderClick()
}, 300)
},
// 滑动拼图验证码逻辑
silderClick: function () {
const self = this
var canvas = document.getElementById('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)
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
//鼠标抬起事件
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%'
// self.$message.success('验证通过')
// self.a = false
// self.aa()
// 调用获取短信验证码接口
self.getMessage()
setTimeout(()=> {
rest();
self.puzzle = false
},500)
self.aa()
} 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
}
}
//鼠标移动事件
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 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()
}
//清除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 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)
};
const num = parseInt(Math.random() * 4)
img.crossOrigin = "Anonymous"
img.src = self.imgArr[num]
}
//绘制方块
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'
}
//获取图片后面的随机号码
function getRandomNumberByRange(start, end) {
return Math.round(Math.random() * (end - start) + start)
}
//鼠标按下
slider.onmousedown = function (e) {
downX = e.clientX;
yd = true
}
//鼠标在按住滑块下移动
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)
})
//刷新
refresh.onclick = function(){
rest()
}
},需注意：点击按钮后，滑动拼图区域打开，这里是可以手动进行拼图的刷新，但是reset图片需自己寻找，修改html代码图片路径
以上代码即可实现一个点击按钮后，首先进行滑动拼图验证的功能。弹框展开之前需要什么逻辑自行在handleClick方法中编写即可。有其他较简单的实现方式可私聊！！！
1849
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
