进度条案例

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