国瑞前端
当前位置: Javascript > 原生js实现拖动滑块验证_封装版

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

2019-07-25 分类：Javascript 作者：huanggr 阅读（3188）

原生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)
！

「梦想一旦被付诸行动，就会变得神圣，如果觉得我的文章对您有用，请帮助本站成长」

赞(14) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签：

上一篇：

下一篇：

相关推荐

共 0 条评论关于"原生js实现拖动滑块验证_封装版"

最新评论

    暂无留言哦~~

博客简介

国瑞个人博客: https://www.huanggr.cn/，我们关注Web前端开发技术，web前端开发,移动前端开发，前端资讯，同时分享前端资源和工具等，期待你的参与,了解更多..

博主独立研发主题：

广告

最近更新

广告

随机文章

广告

热门标签

前端技术博客

广告

精彩评论

广告

站点统计

  • 文章总数： 334 篇
  • 草稿数目： 86 篇
  • 分类数目： 28 个
  • 独立页面： 5 个
  • 评论总数： 109 条
  • 链接总数： 10 个
  • 标签总数： 111 个
  • 注册用户： 176 人
  • 访问总量： 8,667,984 次
  • 最近更新： 2021年7月21日
服务热线：
 

 QQ在线交流

点击这里给我发消息

 旺旺在线

点击这里给我发消息