动态进度条
2019-03-29 本文已影响0人
Domino_2018
前些天有时间，就写了一些可能会用到的功能。
本篇文章写的就是一个动态进度条的一个展示，代码非常简单。
咱们先看下页面
image
实现方法也很简单，这里不做赘述，直接上代码
<!DOCTYPE html>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)
#myProgress {
width:100%;
height:30px;
position:relative;
background-color:#ddd;
}
#myBar {
background-color:#4CAF50;
width:10px;
height:30px;
position:absolute;
}
<h1>JavaScript 进度条
<div id="myProgress">
<div id="myBar">
<span id="bname">
<button onclick="move()">点我
function move() {
var elem = document.getElementById("myBar");
var width =0;
var id =setInterval(frame, 10);
function frame() {
if (width ==100) {
clearInterval(id);
}else {
width++;
elem.style.width = width +'%';
document.getElementById("myBar").innerText=width+"%";
}
}
}
</html>
代码直接复制就可以运行了，这个是最基础的版本，比如做加载页面的时候，需要结合图片的加载情况去控制进度条的展示，后续有时间会加上。
