Imitating the sliding effect of Jingdong verification code

1. Why do you want to make a pure JavaScript effect that is very simple?

Cause:

This is a student from a training institution, who contacted me, which roughly means that he can't learn anything in school and has to take an exam. More than 60 of them can't even think about how to do it. I can only record a video to help them get through the difficulties. Of course, I also tell them how to learn Js well and provide a lot of ideas. I'm not helping them with their homework I want to help them improve. Finally, I wish all of them can achieve good results and find their own direction on the road of web front-end.

II. Case effect code

<!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>Another one.</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'>Click the button to verify</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){
    //starting point
    var x = e.pageX;

    window.onmousemove=function(e){
        //End
        _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 = 'Verify success';
        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>

Many code places are not written very deep, nor optimized. They can't read too much. They just started to learn js.

Design sketch:

III. If you want to see the video version and download the completion code (including pictures)

Video link: https://www.3mooc.com/front/couinfo/1340

Red cent

Posted by Glyde on Thu, 28 Nov 2019 07:12:08 -0800

Programmer Group

Imitating the sliding effect of Jingdong verification code

1. Why do you want to make a pure JavaScript effect that is very simple?

II. Case effect code

III. If you want to see the video version and download the completion code (including pictures)

Hot Keywords