注册有礼

用JS制作滑块验证码的思路及具体过程是怎样的

Admin 2022-06-18 群英技术资讯 765 次浏览

上一篇：JS数组去重有几种类型，分别怎么实现 下一篇：用JS如何制作返回顶部按钮，逻辑部分怎么写
在实际应用中，我们有时候会遇到“用JS制作滑块验证码的思路及具体过程是怎样的”这样的问题，我们该怎样来处理呢？下文给大家介绍了解决方法，希望这篇“用JS制作滑块验证码的思路及具体过程是怎样的”文章能帮助大家解决问题。



本文实例为大家分享了JavaScript实现滑块验证码的具体代码，供大家参考，具体内容如下

效果：鼠标在底部滑块上按下按住不松拖动可以移动滑块，上面大图里面带有小图背景的滑块也会跟随移动，移动到大图背景缺少区域即可完成验证。以上效果要实现，需要鼠标按下（mousedown事件），鼠标松开（mouseup事件），鼠标移动（mousemove事件）这几个事件。

先制作html部分实现静态效果，大图里面可移动的小块背景大小与大图一致，给小图块的背景添加background-position属性来控制小图要显示的图片区域

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: #34495e;
        }
        .wrap{
            width: 600px;
            margin: 100px auto;
        }
        .banner{
            width: 600px;
            height: 400px;
            background: url(img/ChMkJ1bZOGOIE_lfABJWl176xQgAAMhjALAOLwAElav369.jpg);
            background-size: 600px 400px;
            position: relative;
        }
        .blank-box{
            position: absolute;
            top: 100px;
            left: 200px;            
            width: 50px;
            height: 50px;
            background: #fff;
        }
        .block{
            position: absolute;
            top: 100px;
            left: 0;            
            width: 50px;
            height: 50px;
            background: url(img/ChMkJ1bZOGOIE_lfABJWl176xQgAAMhjALAOLwAElav369.jpg);
            background-size:600px 400px;
            background-position:-200px -100px;
            border: 1px solid red;
        }
        .move{
            position: relative;
        }
        .move p{
            height: 50px;
            line-height: 50px;
            font-size: 16px;
            color: #666;
            background: #eee;
            text-align: center;
        }
        .move-block{
            position: absolute;
            left: 0;
            top: 0;
            width: 50px;
            height: 50px;
            background:#1abc9c;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="banner">
            <div class="blank-box"></div>
            <div class="block"></div>
        </div>
        <div class="move">
            <p>移动滑块>>></p>
            <div class="move-block"></div>
        </div>
    </div>  
</body>
</html>

 JS部分：

获取需要的dom元素，鼠标在底部滑块上按下时，才能移动，所以在这个滑块上绑定一个鼠标按下事件，在这个事件里通过event这个对象获取鼠标的坐标点并减去小块的偏移量来获取滑块移动的偏差值（鼠标的坐标点减去这个偏差值才是真实移动的距离），移动状态变为可滑动。

let banner=document.querySelector('.banner');
let blankBox=document.querySelector('.blank-box');
let block=document.querySelector('.block');

let moveBlock=document.querySelector('.move-block');
let isDrop=false;//是否可滑动
let x,y;//偏移量
moveBlock.onmousedown=function(e){
    var e=e||window.event;
    x=e.clientX - block.offsetLeft;
    y=e.clientY - block.offsetTop;
    isDrop=true;
}

当滑动状态为true时，用鼠标的坐标点减去这个偏差值，并对二个可移动的滑块重新定位。滑块滑动到大图缺少区域即为验证成功。

moveBlock.onmousemove=function(e){
            if(isDrop){
                var e=e||window.event;
                let left= e.clientX-x;
                block.style.left=left+'px';
                moveBlock.style.left=left+'px';
                //200大图里面缺失区域距离左边的位置
                if(Math.abs(left-200)<=3){
                   alert('验证成功');
                }
            }            
        }

到这里已经初步实现效果了，但是滑块会超出大图的范围，需要给滑块的滑动距离加个限定，不然它会超出大图的范围，

moveBlock.onmousemove=function(e){
            if(isDrop){
                var e=e||window.event;
                let left= e.clientX-x;
                let maxX=banner.offsetWidth-block.offsetWidth;
                //范围限定
                if(left<0){
                    left=0
                }
                if(left>maxX){
                    left=maxX
                }
                block.style.left=left+'px';
                moveBlock.style.left=left+'px';
                //200大图里面缺失区域距离左边的位置
                if(Math.abs(left-200)<=3){
                    alert('验证成功');
                }
            }            
        }

鼠标松开可移动状态变为false,为了防止移动过快，把事件绑定到document上

document.onmouseup=function(){
            isDrop=false;
        }

到这里效果已经实现了，如果想要背景大图的缺失区域是随机的可以加个，随机定位函数。

//随机定位
        function randomPosition(){
            /*随机数公式取 n-m之间的随机数  Math.random() * (m-n)+n*/
            let ranX=Math.round(Math.random()* (banner.offsetWidth-100)+100);
            let ranY=Math.round(Math.random() * (banner.offsetHeight-0)+0);

            blankBox.style.left=ranX+'px';
            blankBox.style.top=ranY+'px';

            block.style.top=ranY+'px';
            block.style.backgroundPosition=-ranX+'px '+-ranY+'px'
        }

全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: #34495e;
        }
        .wrap{
            width: 600px;
            margin: 100px auto;
        }
        .banner{
            width: 600px;
            height: 400px;
            background: url(img/ChMkJ1bZOGOIE_lfABJWl176xQgAAMhjALAOLwAElav369.jpg);
            background-size: 600px 400px;
            position: relative;
        }
        .blank-box{
            position: absolute;
            top: 100px;
            left: 200px;            
            width: 50px;
            height: 50px;
            background: #fff;
        }
        .block{
            position: absolute;
            top: 100px;
            left: 0;            
            width: 50px;
            height: 50px;
            background: url(img/ChMkJ1bZOGOIE_lfABJWl176xQgAAMhjALAOLwAElav369.jpg);
            background-size:600px 400px;
            background-position:-200px -100px;
            border: 1px solid red;
        }
        .move{
            position: relative;
        }
        .move p{
            height: 50px;
            line-height: 50px;
            font-size: 16px;
            color: #666;
            background: #eee;
            text-align: center;
        }
        .move-block{
            position: absolute;
            left: 0;
            top: 0;
            width: 50px;
            height: 50px;
            background:#1abc9c;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="banner">
            <div class="blank-box"></div>
            <div class="block"></div>
        </div>
        <div class="move">
            <p>移动滑块>>></p>
            <div class="move-block"></div>
        </div>
    </div>  
    <script>
        let banner=document.querySelector('.banner');
        let blankBox=document.querySelector('.blank-box');
        let block=document.querySelector('.block');

        let moveBlock=document.querySelector('.move-block');
        let isDrop=false;//是否可滑动
        let x,y,targetleft;//偏移量,左边定位距离
        moveBlock.onmousedown=function(e){
            var e=e||window.event;
            x=e.clientX - block.offsetLeft;
            y=e.clientY - block.offsetTop;
            isDrop=true;
        }

        moveBlock.onmousemove=function(e){
            if(isDrop){
                var e=e||window.event;
                let left= e.clientX-x;
                let maxX=banner.offsetWidth-block.offsetWidth;
                //范围限定
                if(left<0){
                    left=0
                }
                if(left>maxX){
                    left=maxX
                }
                block.style.left=left+'px';
                moveBlock.style.left=left+'px';
                //200大图里面缺失区域距离左边的位置
                if(Math.abs(left-targetleft)<=5){
                    alert('验证成功');
                }
            }            
        }
        document.onmouseup=function(){
            isDrop=false;
        }

        //随机定位
        function randomPosition(){
            /*随机数公式取 n-m之间的随机数  Math.random() * (m-n)+n*/
            let ranX=Math.round(Math.random()* (banner.offsetWidth-100)+100);
            let ranY=Math.round(Math.random() * (banner.offsetHeight-0)+0);


            targetleft=ranX;
            blankBox.style.left=ranX+'px';
            blankBox.style.top=ranY+'px';

            block.style.top=ranY+'px';
            block.style.backgroundPosition=-ranX+'px '+-ranY+'px'
        }
        randomPosition()
    </script>
</body>
</html>

现在大家对于用JS制作滑块验证码的思路及具体过程是怎样的的内容应该都有一定的认识了吧，希望这篇能对大家有所帮助。最后，想要了解更多，欢迎关注群英网络，群英网络将为大家推送更多相关的文章。 群英智防CDN，智能加速解决方案
标签： js滑块验证码

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

上一篇：JS数组去重有几种类型，分别怎么实现 下一篇：用JS如何制作返回顶部按钮，逻辑部分怎么写

猜你喜欢

云活动 云活动

推荐内容

相关标签

成为群英会员,开启智能安全云计算之旅

立即注册
专业资深工程师驻守
7X24小时快速响应
一站式无忧技术支持
免费备案服务
产品与服务 云服务器 智防系统 服务器租用 服务器托管 虚拟主机
帮助中心 注册与购买 备案问题 鹰云服务器问题 服务器托管问题 域名问题 高防服务器问题 服务器租用问题
关于群英 群英简介 公司动态 资质荣誉 发展历程 群英环境 汇款信息 备案中心 联系我们
其他 数据中心 生态合作
友情链接
友链合作 群英网络 智帝云 主机评测 idc公司 商城系统 跨境电商 主机吧 酷库博客 OA系统 腾讯企业邮箱 锐成信息 sdwan

关注或联系群英网络

7x24小时售前：400-678-4567

7x24小时售后：0668-2555666

24小时QQ客服

群英微信公众号

Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有

增值电信经营许可证 : B1.B2-20140078    粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008

免费拨打 400-678-4567
免费拨打 400-678-4567 免费拨打 400-678-4567 或 0668-2555555
在线客服
在线客服
微信公众号
返回顶部
返回顶部 返回顶部
在线客服
在线客服