MIprogress

功能描述

实现进度条,滑块功能

依赖的模块

快速使用

     相关html 结构

        <!--进度条1-->
          <div class="Progressone">                  一级结构
            <div class="Progress">                 一级结构
              <div id="Progress_bar" style="width:0%;" class="Progress-bar"></div>          三级结构
            </div>
            <span id="Progress_total" class="Progress-total"></span>                      三级结构
          </div>
          <!--进度条2-->
          <div class="Progresstwo" id="Progresstwo">                              一级结构
            <div id="Progress_two_bar" class="Progress-two-bar">                  二级结构
              <div id="Progress_two" class="Progress-two"></div>                  三级结构
            </div>
          </div>
          <!--进度条3-->
          <div class="progressthree">                                              一级结构
            <center>                                                    
              <h3>用鼠标拖动小黄色小按钮<span id="three">0</span>%</h3>              
            </center>
            <div id="threeDiv" class="threeDiv">                                二级结构
              <div id="threebg"  class="threebg"></div>        三级结构
              <div id="minthree" class="minthree">            
                <div id="vals" class="vals">0</div>                                四级结构
              </div>
            </div>
          </div>
          <!--进度条4-->
          <div class="progress-four">                                            一级结构
            <div id="four" class="four">                                        二级结构
              <div id="headfour" class="headfour"></div>
              <span id="spanfour" class="spanfour"></span>
              <div>                                                                三级结构
                <div class="percentagefour"><span id="percentage_four">0</span>%</div>      四级结构
              </div>
            </div>
          </div>
          <!--进度条5-->
          <div class="progress-five">                                        一级结构
            <div id="progress_five" class="five">                            二级结构
              <div id="color_five" class="color-five"></div>
              <div class="five-font" id="five_font">请拖动滑块解锁</div>      三级结构
              <div id="fivebtn" class="five-btn">&gt;&gt;</div>
            </div>
          </div>
     主要css样式

      .Progressone .Progress  .Progress-bar    .Progress-total                        自动进度条1,渐变红
      .Progresstwo .Progress-two-bar .Progress-two                                自动进度条2,渐变橙
      .progressthree .threeDiv .threebg .minthree .vals                            滑块进度条3,渐变黄
      .progress-four .four .headfour .spanfour .percentagefour                    滑块进度条4,渐变绿
      .progress-five .five .color-five .five-font .five-btn                        滑块进度条5,青色

      进度条js
      只有第一个封装到一个函数里面
       function Progressone() {
          var Progress_bar = document.getElementById("Progress_bar");
          var Progress_total = document.getElementById("Progress_total");
          Progress_bar.style.width = parseInt(Progress_bar.style.width) + 1 + "%";
          Progress_total.innerHTML = Progress_bar.style.width;
          if (Progress_bar.style.width == "100%") {
            window.clearTimeout(timeout);
            return;
          }
        var timeout = window.setTimeout("Progressone()", 100);
        }
        window.onload = function () {
          Progressone();
        }
        其余每个进度条的方法全部分开封装到方法中
        例:
        var Progresstwo = (function () {
          var Progresstwoa = document.getElementById('Progresstwo');
          Progresstwoa.onclick = function () {
            var pro = 0;//设置进度条的初始值
            var proBar = setInterval(function () {
              pro++;
              document.getElementById("Progress_two").style.width = pro + "%";
              if (pro == 100) {
                clearInterval(proBar);
              }
            }, 100);
          }
        })()

特别说明

1.如果要使用进度条1:

三级结构的行内样式必须要加style="width:0%;"