国瑞个人博客
首页 > Javascript > 原生js实现拖动滑块验证_封装版

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

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

 2019年07月25日 作者: 国瑞个人博客 453次浏览

原生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)
百度已收录

点击快速分享:

以上就是国瑞前端个人博客带来的是《原生js实现拖动滑块验证_封装版》,感谢您的观看!

如果没有特殊的说明,本文即为国瑞前端博客原创(www.huanggr.cn),欢迎读者转载并保留本站版权!https://www.huanggr.cn/1809.html

「专业前端博客,如果觉得我的文章对您有用,请帮助本站成长」

赞( 14 ) 打赏

谢谢你请我吃鸡腿*^_^*

支付宝
微信
14

谢谢你请我吃鸡腿*^_^*

支付宝
微信
标签:

上一篇:

下一篇:

相关文章:

共有 0 条评论

博客简介

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

博主独立研发主题:

本站唯一QQ群

加入国瑞个人博客QQ群

本群为学习探讨群,主要和前端相关,欢迎广大前端(抱有学习目的均可)爱好者加入!广告请勿添加!

升级版本

web前端开发博客,基于vue脚手架制作的前端博客正在制作中,尽情期待,目前示例的代码位于此处

最新版本(尽请期待)-web前端开发博客

精彩评论

本站主要提供服务

二年web前端开发博客,本站专注提供web资源下载,技术问题解答,经验分享,也提供新手的web技术指导,二年前端个人博客,期待你的加入!

站点统计

  • 文章总数: 276 篇
  • 草稿数目: 54 篇
  • 分类数目: 26 个
  • 页面总数: 16 个
  • 评论总数: 243 条
  • 链接总数: 10 个
  • 标签总数: 107 个
  • 建站时间: 839 天
  • 注册用户: 668 人
  • 访问总量: 8824321 次
  • 最近更新: 2019年8月9日
-->