进度条
初衷:很多人在初学前端的时候都会问,“如何入门前端?”
同为在前端学习道路上,奋力追赶的一员,本人对于目前网络上所能看到的 “入门级” 的教材并不太满意。学习一门新知识,实例是尤其重要的。在这里本人整理了目前页面上常见功能实现的具体实例。愿能为大家提供一些帮助。
希望能够与大家互相分享,共同进步。
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();
}
})();
好啦,现在所有的代码都写完啦!
赶快打开浏览器,看看效果吧!
在这里,只是给大家提供一种思路,参考。
具体的实现,每个人都可以有不同的方法。
请大家赶快发挥想象,把你最想实现的功能,在电脑敲出来吧!