怎么新建MySQL数据库

发布时间：2022-06-18 作者：admin
阅读：310
在实际应用中，我们有时候会遇到“用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制作滑块验证码的思路及具体过程是怎样的的内容应该都有一定的认识了吧，希望这篇能对大家有所帮助。最后，想要了解更多，欢迎关注群英网络，群英网络将为大家推送更多相关的文章。
推荐阅读：
  1. 在HTML中如何让button居中，有几种方法
  2. CSS中flex布局如何实现自动换行？
  3. JS中怎样删除数组末尾元素？教你两种方法

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

js滑块验证码

上一篇：JS数组去重有几种类型，分别怎么实现

下一篇：用JS如何制作返回顶部按钮，逻辑部分怎么写

相关阅读

二维码-群英

长按识别二维码并关注微信

更方便到期提醒、手机管理

7*24 全天候服务

售前 400-678-4567

售后 0668-2555666

售后 400 678 4567

信息安全 0668-2555 118

域名空间 3004329145

新用户注册，获新人礼包 管理控制台