本博客使用html5的progress标签进行书写。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script type="text/javascript">
<!-- 当网页加载完毕后开始执行 -->
window.onload=function(){
// 获取进度条的value的属性值
var pg=document.getElementById("pg");
//定时函数，跳动时间间隔为0.1s
setInterval(function(e){
if(pg.value!=100) pg.value++;
else pg.value=0;
//向进度条后的span标签书写进度
document.getElementById("text").innerHTML=pg.value+"%";
},100);
};
</script>
<body>
<!-- 一个progress标签，设置最大值是100，初始值为0，其后的span标签用于显示进度条的进度 -->
<progress max="100" value="0" id="pg"></progress><span id="text"></span>
</body>
</html>结果如图所示：
