MIprogress

功能描述

  1. 实现进度条，滑块功能

依赖的模块

快速使用

  1.      相关html 结构
  3.         <!--进度条1-->
  4.           <div class="Progressone">                  一级结构
  5.             <div class="Progress">                 一级结构
  6.               <div id="Progress_bar" style="width:0%;" class="Progress-bar"></div>          三级结构
  7.             </div>
  8.             <span id="Progress_total" class="Progress-total"></span>                      三级结构
  9.           </div>
  10.           <!--进度条2-->
  11.           <div class="Progresstwo" id="Progresstwo">                              一级结构
  12.             <div id="Progress_two_bar" class="Progress-two-bar">                  二级结构
  13.               <div id="Progress_two" class="Progress-two"></div>                  三级结构
  14.             </div>
  15.           </div>
  16.           <!--进度条3-->
  17.           <div class="progressthree">                                              一级结构
  18.             <center>                                                    
  19.               <h3>用鼠标拖动小黄色小按钮<span id="three">0</span>%</h3>              
  20.             </center>
  21.             <div id="threeDiv" class="threeDiv">                                二级结构
  22.               <div id="threebg"  class="threebg"></div>        三级结构
  23.               <div id="minthree" class="minthree">            
  24.                 <div id="vals" class="vals">0</div>                                四级结构
  25.               </div>
  26.             </div>
  27.           </div>
  28.           <!--进度条4-->
  29.           <div class="progress-four">                                            一级结构
  30.             <div id="four" class="four">                                        二级结构
  31.               <div id="headfour" class="headfour"></div>
  32.               <span id="spanfour" class="spanfour"></span>
  33.               <div>                                                                三级结构
  34.                 <div class="percentagefour"><span id="percentage_four">0</span>%</div>      四级结构
  35.               </div>
  36.             </div>
  37.           </div>
  38.           <!--进度条5-->
  39.           <div class="progress-five">                                        一级结构
  40.             <div id="progress_five" class="five">                            二级结构
  41.               <div id="color_five" class="color-five"></div>
  42.               <div class="five-font" id="five_font">请拖动滑块解锁</div>      三级结构
  43.               <div id="fivebtn" class="five-btn">&gt;&gt;</div>
  44.             </div>
  45.           </div>
  46.      主要css样式
  48.       .Progressone .Progress  .Progress-bar    .Progress-total                        自动进度条1，渐变红
  49.       .Progresstwo .Progress-two-bar .Progress-two                                自动进度条2，渐变橙
  50.       .progressthree .threeDiv .threebg .minthree .vals                            滑块进度条3，渐变黄
  51.       .progress-four .four .headfour .spanfour .percentagefour                    滑块进度条4，渐变绿
  52.       .progress-five .five .color-five .five-font .five-btn                        滑块进度条5，青色
  54.       进度条js
  55.       只有第一个封装到一个函数里面
  56.        function Progressone() {
  57.           var Progress_bar = document.getElementById("Progress_bar");
  58.           var Progress_total = document.getElementById("Progress_total");
  59.           Progress_bar.style.width = parseInt(Progress_bar.style.width) + 1 + "%";
  60.           Progress_total.innerHTML = Progress_bar.style.width;
  61.           if (Progress_bar.style.width == "100%") {
  62.             window.clearTimeout(timeout);
  63.             return;
  64.           }
  65.         var timeout = window.setTimeout("Progressone()", 100);
  66.         }
  67.         window.onload = function () {
  68.           Progressone();
  69.         }
  70.         其余每个进度条的方法全部分开封装到方法中
  71.         例:
  72.         var Progresstwo = (function () {
  73.           var Progresstwoa = document.getElementById('Progresstwo');
  74.           Progresstwoa.onclick = function () {
  75.             var pro = 0;//设置进度条的初始值
  76.             var proBar = setInterval(function () {
  77.               pro++;
  78.               document.getElementById("Progress_two").style.width = pro + "%";
  79.               if (pro == 100) {
  80.                 clearInterval(proBar);
  81.               }
  82.             }, 100);
  83.           }
  84.         })()

特别说明

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

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