1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <title>Title</title>
7 <style>
8 * {
9 margin: 0;
10 padding: 0;
11 border: none;
12 }
13
14 #progress {
15 width: 1000px;
16 height: 20px;
17 line-height: 20px;
18 /*background-color: #e8e8e8;*/
19 margin: 100px auto;
20 position: relative;
21 }
22
23 #progress_bar {
24 width: 900px;
25 height: 100%;
26 background-color: #ccc;
27 border-radius: 8px;
28 position: relative;
29 }
30
31 #progress_value {
32 position: absolute;
33 right: 30px;
34 top: 0;
35 }
36
37 #progress_bar_fg {
38 width: 0;
39 height: 100%;
40 background-color: purple;
41 border-top-left-radius: 8px;
42 border-bottom-left-radius: 8px;
43 }
44
45 span {
46 width: 10px;
47 height: 30px;
48 background-color: purple;
49 position: absolute;
50 left: 0;
51 top: -5px;
52 border-radius: 5px;
53 cursor: pointer;
54 }
55 </style>
56 </head>
57
58 <body>
59 <div id="progress">
60 <div id="progress_bar">
61 <div id="progress_bar_fg"></div>
62 <span></span>
63 </div>
64 <div id="progress_value">0%</div>
65 </div>
66 <script>
67 window.addEventListener('load', function (ev) {
68 // 1. 获取标签
69 var progress = document.getElementById('progress');
70 var progressBar = progress.children[0];
71 var progressBarFg = progressBar.children[0];
72 var mask = progressBar.children[1];
73 var progressValue = progress.children[1];
74 // 2. 监听鼠标在mask上面的按下
75 mask.onmousedown = function (evt) {
76 var e = evt || window.event;
77 // 2.1 获取按下的坐标
78 var pointX = e.pageX - mask.offsetLeft;
79 // 2.2 监听鼠标的移动
80 document.onmousemove = function (ev1) {
81 var e = ev1 || window.event;
82 // 2.3 获取水平方向移动的距离
83 var x = e.pageX - pointX;
84
85 if (x < 0) {
86 x = 0;
87 } else if (x > progressBar.offsetWidth - mask.offsetWidth) {
88 x = progressBar.offsetWidth - mask.offsetWidth
89 }
90
91 // 2.4 走起来
92 mask.style.left = x + 'px';
93 progressBarFg.style.width = x + 'px';
94 progressValue.innerText = parseInt(x / (progressBar.offsetWidth - mask.offsetWidth) * 100) + '%';
95 return false;
96 }
97 };
98
99 // 3. 监听鼠标松开
100 document.onmouseup = function (ev1) {
101 document.onmousemove = null;
102 };
103
104
105 /* document.addEventListener('mouseup', function (ev1) {
106 document.addEventListener('mousemove', null);
107 });*/
108
109
110
111 });
112 </script>
113 </body>
114
115 </html>
<script>
window.addEventListener('load', function (ev) {
// 1. 获取标签
var progress = document.getElementById('progress');
var progressBar = progress.children[0];
var progressBarFg= progressBar.children[0];
var mask= progressBar.children[1];
var progressValue= progress.children[1];
var pointX = 0;
function test(ev1) {
var e = ev1 || window.event;
// 2.3 获取水平方向移动的距离
var x = e.pageX - pointX;
if(x < 0){
x = 0;
}else if(x > progressBar.offsetWidth - mask.offsetWidth){
x = progressBar.offsetWidth - mask.offsetWidth
}
// 2.4 走起来
mask.style.left = x + 'px';
progressBarFg.style.width = x + 'px';
progressValue.innerText = parseInt(x / (progressBar.offsetWidth - mask.offsetWidth)* 100) + '%';
return false;
}
// 2. 监听鼠标在mask上面的按下
mask.addEventListener('mousedown', function(evt){
var e = evt || window.event;
// 2.1 获取按下的坐标
pointX = e.pageX - mask.offsetLeft;
// 2.2 监听鼠标的移动
document.addEventListener('mousemove', test);
});
// 3. 监听鼠标松开
document.addEventListener('mouseup', function (ev1) {
document.removeEventListener('mousemove', test);
});
});
</script>
