本文實例為大家分享了js進度條加載效果的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>下載進度</title><style>/*定義父容器*/.content{width: 500px;height: 200px;background: pink;margin:0 auto;}/*定義進度條*/.box{width: 20px;height: 30px;line-height: 30px;text-align: center;background: #f00;color: #fff;}/*定義下方顯示的下載百分比*/.percent{width: 100%;height: 30px;line-height: 30px;color: #00f;text-align: center;}</style></head><body><div class="content" id="content"><input type="button" id="button" value="暫停/增加" onclick="parse()"><div class="box" id="box"></div><div class="percent" id="percent"></div></div><script>// 獲取id為box的元素var box = document.getElementById("box");//初始化y，此值只可以放在方法外部，若放到方法內(nèi)部的話，那方法的每一次執(zhí)行都是從寬度為0開始，從而使得進度條會一直停留在第一次執(zhí)行方法的位置。var y = 0;//定義parse()方法function parse(){//獲取進度條div的寬度var x = box.style.width;x = parseInt(x) + 1;y = y+1;//將y值加上百分號賦值給box的寬度。這樣每次+1就可以實現(xiàn)進度條占父容器的100%;box.style.width = y + "%";//將y值加上百分號并賦值給顯示下載百分比的div上document.getElementById("percent").innerHTML = y + "%";//判斷當(dāng)y已經(jīng)100的時候，也就是進度條的寬度和父容器的寬度一致的時候停止。if (y >= 100) {clearInterval(id);document.getElementById("percent").innerHTML = "100%";document.getElementById("box").innerHTML = "下載完畢!";}}//每10毫秒調(diào)用一下parse()方法.var id = setInterval("parse()",10);//當(dāng)單機父容器時，進度條停止document.getElementById("content").onclick = function(){clearInterval(id);} </script></body></html>以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持VeVb武林網(wǎng)。
新聞熱點
疑難解答
