自己手写的滑块验证码，前端签证码。因为极验验证好像要收费，自己纯手工打造，大家可以自己在这个基础上改进

来源：互联网发布：网络代理授权书编辑：程序博客网时间：2024/06/08 12:08

需要的外部插件：polyfill.min.js（兼容IE）；html2canvas.js(截图插件)；这个示例没有使用jquery，无需引用。代码写的可能不太友好，将就着看吧。吐舌头

需要用到的图片也已经上传。如果图片打不开，自己随便找几张图片替换。亲测可用。

html：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/sp_common.css"/>
<style type="text/css">
/*左边待滑动的块*/
.changePosition{
/*top: 68px;*/
left: 0%;
opacity: 1;
z-index: 10000;

}

/*放进滑块的截图*/
canvas{
position: relative;
top: -20px;
left: -20px;

}

/*大的包层*/
.werap{
top: 15%;
left: 45%;
}

/*截图*/
.pi{
position:absolute;
/*left: 20px;*/
/*clip:rect(20px 70px 70px 20px);*/
/*border: 1px solid red; */
}

/*图片中显示的块，为了有一个看的清楚的区分*/
.showArea{
height: 60px;
width: 60px;
/*border: 2px solid cornflowerblue;*/
opacity: 0.8;
z-index: 100;
background-color: gray;
/*top: 65px;
left: 15px;*/
}
/*-----------------------*/
.lineDiv {
position: relative;
height: 40px;
background: #F9F9F9;
width: 460px;
margin: 20px auto;
border: 1px solid #cbcbcb;
border-radius: 50px;
line-height: 40px;
color: #a8a8a8;
text-align: center;
}

.lineDiv .minDiv {
position: absolute;
top: 0px;
left: 0;
width: 72px;
height: 40px;
background: url(img/slider.png);
background-size: 100% 100%;
background-repeat: no-repeat;
/*background: green;*/
cursor: pointer
}

.right,.wrong{
position: absolute;
right: -30px;
top: 10px;
display: none;
}
</style>
</head>
<body>
<div class="werap" id="wrap" style="position: relative;width: 500px;height: 200px;">


<div class="changePosition" id="changePosition" style="height: 50px;width: 50px;position: relative;"></div>


<div class="showArea" id="showArea" style="position: absolute;"></div>


<img class="pi commonimg" id="pi" src="img/user_icon1.jpg" style="width: 100%;height: 100%;"/>


<img src="img/user_icon1.jpg" id="pit" class="commonimg" style="width: 100%;height: 100%;"/>


<div id="lineDiv" class="lineDiv">
<span id="slider">按住滑块，拖动完成上方拼图</span>
<div id="minDiv" class="minDiv">
</div>
<img class="right" id="right" src="img/right.png"/>
<img class="wrong" id="wrong" src="img/wrong.png"/>
</div>
</div>
<script src="js/polyfill.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/html2canvas.js" type="text/javascript" charset="utf-8"></script>
<script src="js/image.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

image.js：

var canva;
var rectUp;
var rectRight;
var flag = false;

window.onload = function() {
var commonimg =document.getElementsByName('commonimg');

/*for (var j=0;j<commonimg.length;j++) {
commonimg[j].setAttribute('src','')
}*/
var random = Math.round(Math.random()*4);
console.log(random);

document.getElementById("pi").src='img/user_icon'+random+'.jpg';
document.getElementById("pit").src='img/user_icon'+random+'.jpg';
var tempPosition =0;

var changePosition = document.getElementById("changePosition");
var pi =document.getElementById("pi");
var showArea =document.getElementById("showArea");
var lineDiv = document.getElementById('lineDiv'); //长线条
var minDiv = document.getElementById('minDiv'); //小方块




rectUp = Math.round(Math.random()*388);
var rectRight;
var rectBottom;
var rectLeft;

if(rectUp>150){
console.log(1)
rectLeft = rectUp;
rectRight = rectUp+50;

rectUp = Math.round(Math.random()*150);
rectBottom = rectUp+50;
showArea.style.top = (rectBottom-5)+'px';
showArea.style.left = (rectLeft-5)+'px';
pi.style.clip ="rect("+rectUp +"px "+rectRight+"px "+rectBottom+"px "+rectLeft+"px)";
changePosition.style.top =(rectBottom-2)+'px';
html2canvas(document.getElementById('pi'), {
onrendered: function(canvas) {
document.getElementById("changePosition").appendChild(canvas).setAttribute("id","canvas");
canva =document.getElementById("canvas");
console.log(canva);
canva.style.top = -rectUp+'px';
canva.style.left = -rectLeft+'px';
},

});

}else{
console.log(2)
rectRight = rectUp +50;
rectBottom = rectUp +50;
rectLeft = rectUp;
showArea.style.top = (rectRight-5)+'px';
showArea.style.left = (rectUp-5)+'px';
pi.style.clip ="rect("+rectUp+"px "+rectRight+"px "+rectBottom+"px "+rectLeft+"px)";
changePosition.style.top =(rectRight-2)+'px';

html2canvas(document.getElementById('pi'), {
onrendered: function(canvas) {
document.getElementById("changePosition").appendChild(canvas).setAttribute("id","canvas");
canva =document.getElementById("canvas");
console.log(canva);
canva.style.top = -rectUp+'px';
canva.style.left = -rectUp+'px';
},

});
}

console.log(rectUp,rectRight,rectBottom,rectLeft);

var ifBool = false; //判断鼠标是否按下
//事件
var start = function(e) {
e.stopPropagation();
ifBool = true;
console.log("鼠标按下")
}
var move = function(e) {
console.log("鼠标拖动")
if(ifBool) {
if(!e.touches) { //兼容移动端
var x = e.clientX;
} else { //兼容PC端
var x = e.touches[0].pageX;
}
//var x = e.touches[0].pageX || e.clientX; //鼠标横坐标var x
var lineDiv_left = getPosition(lineDiv).left; //长线条的横坐标
var minDiv_left = x - lineDiv_left; //小方块相对于父元素（长线条）的left值
if(minDiv_left >= lineDiv.offsetWidth - 15) {
minDiv_left = lineDiv.offsetWidth - 15;
}
if(minDiv_left < 0) {
minDiv_left = 0;
}
//设置拖动后小方块的left值
minDiv.style.left = minDiv_left-40 + "px";
changePosition.style.left = minDiv_left + "px";
tempPosition = minDiv_left;
console.log(tempPosition);
if(minDiv_left>388){
tempPosition =388;
minDiv.style.left = 388 + "px";
changePosition.style.left = 388 + "px";
}

if(minDiv_left<=0){
tempPosition =0;
minDiv.style.left = 0 + "px";
changePosition.style.left = 0 + "px";
}

/* msg.innerText = parseInt((minDiv_left / (lineDiv.offsetWidth - 15)) * 100);*/
/* vals.innerText = parseInt((minDiv_left / (lineDiv.offsetWidth - 15)) * 100);*/
}
}
var end = function(e) {
ifBool = false;
if(tempPosition>150){
if( (rectRight-tempPosition)<=52 && (rectRight-tempPosition)>=42 ){
console.log(tempPosition,'验证成功！','大于150',rectRight);
success();

}else{
console.log(tempPosition,'验证失败！','大于150',rectRight);
wrong();
}
}else{
if(tempPosition< (rectUp+5) && tempPosition > (rectUp-4) ){
console.log(tempPosition,'验证成功！','小于150');
success();

}else{
console.log(tempPosition,'验证失败！','小于150');
wrong();

}
}



}
//鼠标按下方块
minDiv.addEventListener("touchstart", start);
minDiv.addEventListener("mousedown", start);
//拖动
window.addEventListener("touchmove", move);
window.addEventListener("mousemove", move);
//鼠标松开
window.addEventListener("touchend", end);
window.addEventListener("mouseup", end);
//获取元素的绝对位置
function getPosition(node) {
var left = node.offsetLeft; //获取元素相对于其父元素的left值var left
var top = node.offsetTop;
current = node.offsetParent; // 取得元素的offsetParent
　 // 一直循环直到根元素
　　
while(current != null) {　　
left += current.offsetLeft;　　
top += current.offsetTop;　　
current = current.offsetParent;　　
}
return {
"left": left,
"top": top
};
}

function success(){
var right =document.getElementById("right");
var wrong =document.getElementById("right");
var slider =document.getElementById("slider");
showArea.style.opacity =0;
right.style.display ="block";
wrong.style.display ="none";
minDiv.style.background ='url(img/slider_valid.png)';
minDiv.style.backgroundSize ='100% 100%';
right.style.display ="block"
slider.style.display ="none";
}
function wrong(){
var right =document.getElementById("right");
var wrong =document.getElementById("wrong");
wrong.style.display ="block";
right.style.display ="none";
minDiv.style.background ='url(img/slider_invalid.png)';
minDiv.style.backgroundSize ='100% 100%';

setTimeout(function(){
minDiv.style.background ='url(img/slider.png)';
minDiv.style.backgroundSize ='100% 100%';
minDiv.style.left = 0 + "px";
changePosition.style.left = 0 + "px";
wrong.style.display ="none";
},400)
}


}

效果图：

阅读全文

0 0