自己手写的滑块验证码，前端签证码。因为极验验证好像要收费，自己纯手工打造，大家可以自己在这个基础上改进
2017-08-22 23:13
615 查看
需要的外部插件：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
4000
{
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)
}
}
效果图：
需要用到的图片也已经上传。如果图片打不开，自己随便找几张图片替换。亲测可用。
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
4000
{
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)
}
}
效果图：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 本人自己写的一个ASP.NET的验证码工具类，以供大家参考。因为本人经验尚浅，如有哪些地方不足或错误，希望大家指出来，不胜感谢！
- H-UI的前端处理验证，判断是否已经存在,比较健全的模板，可以自己添加一些校验
- JS实现的一个验证码，可以在前端验证后在提交action
- 一个简单的js合并列的例子,大家可以自己改进哦！
- 自己重新写的KeUserModeCallBack 例子，比网上的代码改进很多，请大家指教!
- 打个广告撒，秀一下我自己做的软件，大家可以去看看哦
- 发布一个简单而又灵活的基础编译环境文件：compiler.mk，欢迎大家共同改进之
- 上班无聊,可以自己学习下别的知识或看看自己以前写的代码有没有好的改进的地方
- 一篇github基础教程，大手勿喷。看别人的。自己刚照着这个学会
- easysize的使用方法 （实现控件大小位置随界面变化而有相应的变化，这个变化可以自己设置）
- spring ioc原理（看完后大家可以自己写一个spring）
- md5是哈希算法的改进加强，因为不同原始值可能hash结果一样，但md5则改善了用于验证消息完整性，不同md5值原始值也必将不一样
- 刚刚提取了金山毒霸的[垃圾清理] 和 [隐私清理]， 分享方法，大家可以自己试一下
- spring ioc原理（看完后大家可以自己写一个spring）
- LInux下可以使用命令自动与网络的NTP服务器同步时间 CSDN验证码验证失败问题解决
- 阿卡索外教网价目表 大家来评价下这个收费贵不贵
- 今天就教大家查看手机的内存使用情况，可以帮你查看自己的程序占用了多大的内存（图文说明）
- jquery-实现的添加个人信息加验证，附完全的注释，相信大家可以看懂
- spring有自己的视图可以实现pdf导出，但是获取pdf总页数太麻烦了，大家有简单的方法吗？
- 自己封装的验证码工具类以及登录验证