基于ES6制作的滑块验证

最新推荐文章于 2024-03-27 09:37:36 发布

@@@厚积而薄发

最新推荐文章于 2024-03-27 09:37:36 发布

阅读量144

点赞数

文章标签： js

本文链接：https://blog.csdn.net/haiyanzuibang/article/details/107481999

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滑块验证</title>
    <link rel="stylesheet" href="./css/index.css">
    <script src="https://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script>
</head>

<body>
    <div class="stage">
        <div class="top">
            <img src="./xia.jpeg" alt="">
            <div class="left"></div>
            <div class="right"></div>
        </div>

        <div class="bot">
            <div class="small">
                <div class="dot"></div>
            </div>
        </div>
    </div>
    <button>刷新</button>
    <script>
        let button = $('button');
        let left = $('.stage .top .left');
        let right = $('.stage .top .right');
        let Top = $('.stage .top');
        let bot = $('.bot')
        let dot =$('.dot')

        let obj = {
            random(jqobj1, jqobj2, jqobj3,jqobj4) {
                let jqobj1_width = jqobj1.width();
                let jqobj1_height = jqobj1.height();
                let jqobj2_width = jqobj2.width();
                let jqobj2_height = jqobj2.height();
                let random_left = Math.ceil(Math.random() * (jqobj1_width / 2 - jqobj2_width+1)) + jqobj1_width / 2 + 'px';
                let random_top = Math.ceil(Math.random() * (jqobj1_height - jqobj2_height+1)) + 'px';
                let random_left2 = Math.ceil(Math.random() * (jqobj1_width / 2 - jqobj2_width+1));
                jqobj2.css({
                    'position': 'absolute'
                });
                jqobj2.css({
                    'left': random_left
                });
                jqobj2.css({
                    'top': random_top
                });
                jqobj3.css({
                    'position': 'absolute'
                });
                jqobj3.css({
                    'top': random_top
                });
                jqobj3.css({
                    'left': random_left2 + 'px'
                });
                jqobj3.css({
                    'backgroundPositionX': -(jqobj2.offset().left - jqobj1.offset().left) + 'px',
                    'backgroundPositionY': -(jqobj2.offset().top - jqobj1.offset().top) + 'px',
                })
                jqobj4.css({
                    'left':random_left2+'px'
                })
            }
        }
        button.click(function () {
            obj.random(Top, right, left,dot);
        })
        let bot1 = document.querySelector('.bot ');
        function foo() {
            left.css({
                'left': (event.clientX - $('.stage').offset().left) + 'px'
            });
            dot.css({
                'left': event.clientX - $('.stage').offset().left + 'px'
            })
            if ((right.offset().left - left.offset().left) <= 5 && (right.offset().left - left
                    .offset().left) >=
                -5) {
                alert('验证成功');
                bot1.removeEventListener('mousemove', foo)
            } else {
                // alert('验证失败')
            }
        }
        bot1.addEventListener('mousedown',function(){
            bot1.addEventListener('mousemove',foo)
        })
        bot1.addEventListener('mouseup',function(){
            bot1.removeEventListener('mousemove',foo);
        })



        
    </script>
</body>

</html>