進度條

代碼儲存在Github
效果預覽

初衷：很多人在初學前端的時候都會問，“如何入門前端？”
同為在前端學習道路上，奮力追趕的一員，本人對于目前網絡上所能看到的 “入門級” 的教材并不太滿意。學習一門新知識，實例是尤其重要的。在這里本人整理了目前頁面上常見功能實現的具體實例。愿能為大家提供一些幫助。
希望能夠與大家互相分享，共同進步。

HTML部分

<div id="myProgress"><div id="myBar"></div></div><div id="myOperation"><button id="myRun">Run</button><span id="myPersent"></span></div>

CSS部分

#myProgress {width: 100%;background-color: #ddd; }#myBar {width: 1%;height: 30px;background-color: green;text-align: center; /*文字水平居中*/color: #fff;line-height: 30px; /*文字垂直居中*/ }#myOperation {margin-top: 10px; }#myRun {background-color: green;border: 0;outline: none;cursor: pointer;color: #fff;padding: 10px 15px; }#myPersent {float: right; }

JavaScript 部分

(function() {var runBtn = document.getElementById("myRun"),myPersent = document.getElementById("myPersent");function progress() {var element = document.getElementById("myBar"); var width = 1; /*從1%開始*/var run = setInterval(frame, 10);function frame() {if (width >= 100) { /*超過100%消除定時器*/clearInterval(run);} else {width++; element.style.width = width + '%'; /*改變width屬性值*/myPersent.innerHTML = width + '%'; /*右下部顯示百分比*/element.innerHTML = width + '%'; /*進度條上顯示百分比*/}}}runBtn.onclick = function() {progress();} })();

---

好啦，現在所有的代碼都寫完啦！

趕快打開瀏覽器，看看效果吧！

在這里，只是給大家提供一種思路，參考。
具體的實現，每個人都可以有不同的方法。
請大家趕快發揮想象，把你最想實現的功能，在電腦敲出來吧！

參考自w3cschools

總結

以上是生活随笔為你收集整理的前端实例练习 - 进度条的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。