1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 *{
8 margin: 0;
9 padding: 0;
10 list-style: none;
11 border: none;
12 }
13
14 #progress{
15 width: 1000px;
16 height: 35px;
17 line-height: 35px;
18 /*background-color: #e8e8e8;*/
19 margin: 100px auto;
20
21 position: relative;
22 }
23
24 #progress_bar{
25 width: 900px;
26 height: 100%;
27 background-color: #ccc;
28 border-radius: 8px;
29
30 position: relative;
31 }
32
33 #progress_value{
34 position: absolute;
35 right: 30px;
36 top: 0;
37 }
38
39 #progress_bar_fg{
40 width: 0;
41 height: 100%;
42 background-color: orangered;
43 border-top-left-radius: 8px;
44 border-bottom-left-radius: 8px;
45 }
46
47 span{
48 width: 25px;
49 height: 50px;
50 background-color: orangered;
51
52 position: absolute;
53 left: 0;
54 top: -7px;
55 border-radius: 5px;
56 cursor: pointer;
57 }
58 </style>
59 </head>
60 <body>
61 <div id="progress">
62 <div id="progress_bar">
63 <div id="progress_bar_fg"></div>
64 <span></span>
65 </div>
66 <div id="progress_value">0%</div>
67 </div>
68
69 <script>
70 window.onload = function () {
71 // 1. 获取需要的标签
72 var progress = document.getElementById("progress");
73 var progress_bar = progress.children[0];
74 var progress_bar_fg = progress_bar.children[0];
75 var mask = progress_bar.children[1];
76 var progress_value = progress.children[1];
77
78 // 2. 监听鼠标按下
79 mask.onmousedown = function (event) {
80 var e = event || window.event;
81
82 // 2.1 获取初始位置
83 var offsetLeft = event.clientX - mask.offsetLeft;
84
85 // 2.2 监听鼠标的移动
86 document.onmousemove = function (event) {
87 var e = event || window.event;
88
89 // 2.3 获取移动的位置
90 var x = e.clientX - offsetLeft;
91
92 // 边界值处理
93 if(x < 0){
94 x = 0;
95 }else if(x >= progress_bar.offsetWidth - mask.offsetWidth){
96 x = progress_bar.offsetWidth - mask.offsetWidth;
97 }
98
99 // 2.4 走起来
100 mask.style.left = x + 'px';
101 progress_bar_fg.style.width = x + 'px';
102 progress_value.innerHTML = parseInt(x / (progress_bar.offsetWidth - mask.offsetWidth) * 100) + '%';
103
104 return false;
105 };
106
107 // 2.5 监听鼠标抬起
108 document.onmouseup = function () {
109 document.onmousemove = null;
110 }
111 }
112 }
113 </script>
114 </body>
115 </html>
标签：托动,bar,进度条,offsetWidth,mask,var,progress,制作,event From： https://www.cnblogs.com/yidw/p/18588970