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%;"

是否仍需要帮助？ 请保持联络！
最后更新于 2024/11/18