<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>ProgressBar</title><style>*{margin: 0;padding: 0;}#father{width: 100%;height: 30px;background: skyblue;}#son{width: 1%;height: 28px;margin-top: 1px;background: rgba(1, 1, 1, 0.5)}</style> </head><body><div id=‘father‘><div id=‘son‘></div></div><div><h3 id="text">0%</h3></div><input type="button" id=‘btn‘ value="点击开始" ></body><script>var obj;var bar = document.getElementById(‘son‘)function action(){var iSpeed=1;obj=setInterval(function(){iSpeed+=1;if(iSpeed>=100){ // 设置达到多少进度后停止clearInterval(obj);}bar.style.width=iSpeed+‘%‘;document.getElementById(‘text‘).innerHTML=iSpeed+‘%‘;},100); // 1s后函数执行一次}var btn = document.querySelector(‘#btn‘);btn.onclick = function() {bar.style.width=0 + ‘%‘;clearInterval(obj);action();};</script></html>
使用效果
js加载条
原文地址：https://www.cnblogs.com/wsjaizlp/p/9845678.html