仿京东验证码效果代码

时间 2020-01-04 标签仿京东验证码效果代码

仿京东验证码效果代码： javascript

HTML部分：css

<div class='main'>
         
    <div class='container' id='container'>
 
        <button>换一张</button>
 
        <div class='img'>
            <img src="3max.png" id='max'>
            <img src="3min.png" class='min' id='min'>
        </div>
 
        <div class='line' id='line'>
            <p id='oDiv'></p>
        </div>
         
    </div>
    <button id='btn'>点击按钮进行验证</button>
</div>

CSS部分：html

*{margin:0;padding:0}
.main{
    width:400px;
    margin: 200px auto;
}
#btn{
    width:400px;
    height: 50px;
    border:1px solid #eee;
}
.container{
    width:360px;
    box-shadow: 0 0 2px 2px #eee;
    margin-bottom:40px;
    padding:20px;
}
.img{
    position: relative;
}
.min{
    position: absolute;
    left:0;
    top:0;
}
.line{
    width: 360px;
    height: 40px;
    background: blue;
    opacity: .4;
    border-radius: 20px;
    margin-top:20px;
    position: relative;
}
.line>p{
    width:50px;
    height: 50px;
    position: absolute;
    left:0;
    top:-5px;
    border-radius: 100%;
    background: #fff;
    box-shadow: 0 0 2px 2px #eee;
}

JavaScript部分：java

var _x,
arrTop = [59,65,65],
arrLeft = [80,164,115];
 
function ranDomNum(){
    var ranDomNum = Math.ceil(Math.random()*3);
    return ranDomNum;
}
 
var num = ranDomNum();
max.src = num+'max.png';  
min.src = num+'min.png';  
min.style.top = arrTop[num-1]+"px";
 
window.onmousedown = function(e){
    //起始点
    var x = e.pageX;
 
    window.onmousemove=function(e){
        //终点
        _x = e.pageX-x;
        if(_x<0){
            _x=0;
        }
        if(_x>line.offsetWidth - oDiv.offsetWidth){
            _x=line.offsetWidth - oDiv.offsetWidth;
        }
        min.style.left = _x+'px';
        oDiv.style.left = _x+'px';
    }
}
window.onmouseup=function(){
 
    if(_x>=arrLeft[num-1] && _x<=arrLeft[num-1]+3){
        btn.innerHTML = '验证成功';
        container.style.display='none';
    }else{
 
        num = ranDomNum();
        max.src = num+'max.png';  
        min.src = num+'min.png';  
        min.style.top = arrTop[num-1]+"px";
 
        min.style.left = 0;
        oDiv.style.left = 0;
    }
    window.onmousemove=null;
}

所有代码：dom

<!DOCTYPE html>
<html>
<head>
    <title>仿京东验证码效果代码</title>
    <style type="text/css">
    *{margin:0;padding:0}
    .main{
        width:400px;
        margin: 200px auto;
    }
    #btn{
        width:400px;
        height: 50px;
        border:1px solid #eee;
    }
    .container{
        width:360px;
        box-shadow: 0 0 2px 2px #eee;
        margin-bottom:40px;
        padding:20px;
    }
    .img{
        position: relative;
    }
    .min{
        position: absolute;
        left:0;
        top:0;
    }
    .line{
        width: 360px;
        height: 40px;
        background: blue;
        opacity: .4;
        border-radius: 20px;
        margin-top:20px;
        position: relative;
    }
    .line>p{
        width:50px;
        height: 50px;
        position: absolute;
        left:0;
        top:-5px;
        border-radius: 100%;
        background: #fff;
        box-shadow: 0 0 2px 2px #eee;
    }
    </style>
</head>
<body>
<div class='main'>
         
    <div class='container' id='container'>
 
        <button>换一张</button>
 
        <div class='img'>
            <img src="3max.png" id='max'>
            <img src="3min.png" class='min' id='min'>
        </div>
 
        <div class='line' id='line'>
            <p id='oDiv'></p>
        </div>
         
    </div>
    <button id='btn'>点击按钮进行验证</button>
</div>
 
<script type="text/javascript">
var _x,
arrTop = [59,65,65],
arrLeft = [80,164,115];
 
function ranDomNum(){
    var ranDomNum = Math.ceil(Math.random()*3);
    return ranDomNum;
}
 
var num = ranDomNum();
max.src = num+'max.png';  
min.src = num+'min.png';  
min.style.top = arrTop[num-1]+"px";
 
window.onmousedown = function(e){
    //起始点
    var x = e.pageX;
 
    window.onmousemove=function(e){
        //终点
        _x = e.pageX-x;
        if(_x<0){
            _x=0;
        }
        if(_x>line.offsetWidth - oDiv.offsetWidth){
            _x=line.offsetWidth - oDiv.offsetWidth;
        }
        min.style.left = _x+'px';
        oDiv.style.left = _x+'px';
    }
}
window.onmouseup=function(){
 
    if(_x>=arrLeft[num-1] && _x<=arrLeft[num-1]+3){
        btn.innerHTML = '验证成功';
        container.style.display='none';
    }else{
 
        num = ranDomNum();
        max.src = num+'max.png';  
        min.src = num+'min.png';  
        min.style.top = arrTop[num-1]+"px";
 
        min.style.left = 0;
        oDiv.style.left = 0;
    }
    window.onmousemove=null;
}
</script>
</body>
</html>