MIprogress

功能描述

实现进度条,滑块功能

依赖的模块

快速使用

相关html 结构 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样式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%;"