js实现一个简单的进度条（一学就会，超简单！）
加载，进度条，js，案例
·
js实现一个简单的进度条（真的超简单！）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 外部容器样式*/
.container{
width: 300px;
height: 30px;
border: 1px solid lightgray;
border-radius: 15px;
}
/* 内部加载部分样式 */
#content{
height: 30px;
border-radius: 15px;
background-color: skyblue;
text-align: center;
line-height: 30px;
}
</style>
</head>
<body>
<div class="container">
<div id="content"></div>
</div>
<script>
//获取content节点
var _content=document.getElementById("content");
var num=0; //进度条里边的长度
//设置计时器（动起来的关键）
var id = setInterval(function(){
num++;
//设置content的宽度（动态变化）
_content.style.width=`${num}px`;
var num1=parseInt(num/3);
//content内文字显示为百分比与宽度对应
_content.innerText=`${num1}%`;
//当content的宽度与container宽度相同时清除计时器
if(num==300){
clearInterval(id);
}
//加载到100%时替换content中的文字
if(_content.innerText=="100%"){
_content.innerText="加载完成"
}
//每隔10毫秒变换一次
},10)
</script>
</body>
</html>
效果图：
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
4
0- 0
已为社区贡献3条内容
所有评论(0)