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

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