Case progress bar

  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.Monitor mouse mask above press
75              mask.onmousedown = function (EVT) {
 76                  var E = || EVT the window.event;
 77                  // 2.1 down coordinate acquired 
78                  var pointX = e.pageX - mask.offsetLeft;
 79                  // mobile monitor mouse 2.2 
80                  document.onmousemove = function (EV1) {
 81                      var E = || EV1 the window.event;
 82                      // 2.3 horizontal movement distance acquiring 
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>
Guess you like
