1，参考代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<progress id="pro" max="100" value="0"></progress>
<script type="text/javascript">
//方法一：使用setInterval
// var pro = document.getElementById("pro");
// var num = 0;
// var timer = setInterval(function(){
// pro.value = num;
// num++;
// if(num>=100){
// //clearInterval(timer);//取消煮熟可以使进度条重复执行
// num = 0;
// }
// },100);
//方法二：使用setTimerout
var num2 = 0;
function timer(){
pro.value = num2;
num2++;
if(num2>=100){
num2=0;
//return;取消注释可以使进度条重复
}
setTimeout(function(){
timer();
},100);
}
timer();
</script>
</body>
</html>2，结果参考文章来源：https://www.toymoban.com/news/detail-722011.html
文章来源地址https://www.toymoban.com/news/detail-722011.html
到了这里，关于web前端JS基础-----制作进度条的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[HTML]Web前端开发技术5.2（HTML5、CSS3、JavaScript ）CSS基础，decoration，selector，properties，Cascading——喵喵画网页](https://imgs.yssmx.com/Uploads/2024/02/751717-1.png)
![[HTML]Web前端开发技术5.1（HTML5、CSS3、JavaScript ）CSS基础，selector，properties，font，Cascading，@import——喵喵画网页](https://imgs.yssmx.com/Uploads/2024/02/752162-1.png)
