原生js实现拖动滑块验证_封装版

原生js实现拖动滑块验证,滑块验证可以防止机器人对网站的频繁试探,下面就带着大家来实现以下: 1234567891011121314151617181920212223242526…

原生js实现拖动滑块验证,滑块验证可以防止机器人对网站的频繁试探,下面就带着大家来实现以下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html>

<head>
    <title></title>
</head>
<style type="text/css">
    #box {
        width: 200px;
        height: 35px;
        margin: 0 auto;
        position: relative;
        box-sizing: border-box;
        border: 1px solid #ccc;
    }

    .bg {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        background-color: green;
    }

    .btn {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        width: 50px;
        box-sizing: border-box;
        border: 1px solid #ccc;
        background-color: #333;
    }

    .text {
        line-height: 35px;
        text-align: center;
        color: red;
        position: absolute;
        width: 100%;
    }
</style>

<body>
    <div id="box">
        <div class="bg"></div>
        <div class="text">拖动验证</div>
        <div class="btn"></div>
    </div>

</body>
<script type="text/javascript">
    function init() {
//原生js实现拖动滑块验证_封装版
        var btn = document.querySelector('.btn');
        var bg = document.querySelector('.bg');
        var text = document.querySelector('.text');
        var width = document.querySelector('#box').offsetWidth;
        var maxLeft = document.querySelector('#box').offsetWidth - btn.offsetWidth;
        var startX = 0;
        var isDown = false;

        function mousedown(e) {
            startX = e.clientX;
            isDown = true;
        }

        function mousemove(e) {
            if (!isDown) return false;
            var left = e.clientX - startX;
            if (left > 0) {
                btn.style.left = left + 'px';
                bg.style.width = left + 'px';
                if (left >= maxLeft) {
                    text.innerText = '验证通过';
                    text.style.color = '#fff';
                    remove();
                }
            }
        }

        function remove() {
            btn.removeEventListener('mousedown', mousedown, null);
            document.removeEventListener('mousemove', mousemove, null);
            document.removeEventListener('mouseup', mouseup, null);
        }

        function mouseup(e) {
            var clientX = e.clientX - startX;
            if (clientX < maxLeft) {
                isDown = false;
                btn.style.left = 0 + 'px';
                bg.style.width = 0 + 'px';
            } else {
                remove();
            }
        }

        btn.addEventListener('mousedown', mousedown, null);
        document.addEventListener('mousemove', mousemove, null);
        document.addEventListener('mouseup', mouseup, null)
    }
    document.addEventListener('readystatechange', init, null)
</script>

</html>

封装后的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
    function Drag(conf){
        this.btn = this.getDom(conf.btn);
        this.bg = this.getDom(conf.bg);
        this.text = this.getDom(conf.text);
        this.box  = this.getDom(conf.box );
        this.width = this.box.offsetWidth;
        this.maxLeft = this.getDom(conf.box).offsetWidth - this.btn.offsetWidth;
        this.startX = 0;   
        this.isDown = false;
        this.success = typeof  conf.success == 'function' ? conf.success : null;

        this.mousedown = this.mousedown.bind(this);
        this.mousemove = this.mousemove.bind(this);
        this.mouseup = this.mouseup.bind(this);
        this.remove = this.remove.bind(this);

        this.btn.addEventListener('mousedown',this.mousedown,null);
        document.addEventListener('mousemove',this.mousemove,null);
        document.addEventListener('mouseup',this.mouseup,null)
    }
    Drag.prototype = {
        getDom:document.querySelector.bind(document),
        getDomAll:document.querySelectorAll.bind(document),
        mousedown:function (e){
            this.startX  = e.clientX;
            this.isDown = true;
        },
        mousemove:function (e){
            if(!this.isDown) return false;
            var left  = e.clientX - this.startX;
            if(left > 0){
                this.btn.style.left = left + 'px';
                this.bg.style.width = left + 'px';
                if(left >= this.maxLeft){
                    this.text.innerText = '验证通过';
                    this.text.style.color = '#fff';
                    this.remove();
                }
            }
        },
        remove:function (){
            this.isDown = false;
            this.btn.removeEventListener('mousedown',this.mousedown,null);
            document.removeEventListener('mousemove',this.mousemove,null);
            document.removeEventListener('mouseup',this.mouseup,null);
            if(this.success != null){
                this.success();
            }
        },
        mouseup:function (e){
            var clientX = e.clientX - this.startX;
            if(clientX < this.maxLeft){
                this.isDown = false;
                this.btn.style.left = 0 + 'px';
                this.bg.style.width = 0 + 'px';
            }else{
                //this.remove.call(this);
            }
        }
    }

    function init(){
        var drag = new Drag({
            box:'#box',
            btn:'.btn',
            bg:'.bg',
            text:'.text',
            success:function(){
                console.log('验证成功')
            }
        });
    }
    document.addEventListener('readystatechange',init,null)

作者: huanggr

为您推荐

发表评论

电子邮件地址不会被公开。 必填项已用*标注