微客导航 » 文章资讯 » js实现html滑动图片拼图验证

js实现html滑动图片拼图验证

2023-07-22 13:52:05 271

本文实例为大家分享了js实现html滑动图片拼图验证的具体代码，供大家参考，具体内容如下

html：









Document

向右滑动验证

css:

*{
margin:0;
padding:0;
}
body{
background-color:#E8E8E8;
}
.container{
position:relative;
}
#canva{
background:indianred;
}

#block{
position:absolute;
left:0px;
}
.refreshIcon{
position:absolute;
left:280px;
top:5px;
width:21px;
height:20px;
cursor:pointer;
background:url(./refresh.png);
display:block;
}
.verSliderBlock{
height:40px;
width:40px;
background-color:#fff;
background:url('./right_arrow.png');
background-size:100%;
box-shadow:003pxrgba(0,0,0,.3);
cursor:pointer;
position:absolute;
text-align:center;
line-height:40px;
color:#45494c;
font-size:25px;
font-weight:400;

}
.bar{
position:relative;
text-align:center;
width:310px;
height:40px;
line-height:40px;
margin-top:15px;
background:#f7f9fa;
color:#45494c;
border:1pxsolid#e4e7eb;
display:block;
}
#bar-mask{
position:absolute;
left:0;
top:0;
height:40px;
border:0solid#1991fa;
background:#d1e9fe;
}

js:

(function(window){
varcanvas=document.getElementById('canvas');
varblock=document.getElementById('block');
varcanvas_ctx=canvas.getContext('2d')
varblock_ctx=block.getContext('2d')
varimg=document.createElement('img')
varrefresh=document.querySelector('.refreshIcon')
varx=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)
//获取图片后面的随机号码
functiongetRandomNumberByRange(start,end){
returnMath.round(Math.random()*(end-start)+start)
}
//初始化图片
functioninitImg(){
img.onload=function(){
canvas_ctx.drawImage(img,0,0,310,155)
block_ctx.drawImage(img,0,0,310,155)
varblockWidth=w+r*2
var_y=y-r*2+2//滑块实际的y坐标
varImageData=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
functionclean(){
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')
}
//绘制方块
functiondraw(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')
//添加移动事件
varblock_slider=document.querySelector("#block");
varslider=document.querySelector(".verSliderBlock");
varslider_mark=document.querySelector("#bar-mask");
//用于判断当前是否是在按住滑块的情况下
varyd=false
varmoveX=0
vardownX=0

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

}

//鼠标移动事件
functionhadleMousemove(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";

}
}

}

//鼠标抬起事件
functionhadleMouseup(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)
})


functionrest(){
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))

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com