进度条

代码储存在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