刚开始学习JS不久，以及第一次来到博客园，第一次进行分享博文。。。
噢，不对，不能说是分享，而是学习请教，请前辈多多指教，各个方面都可以~
感谢您的路过~
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???????<style type="text/css"> ???????????.boxs{width:800px;margin:100px auto;} ???????????.box{width:800px;background:grey;border-radius:4px;position:relative;height:34px;float:left;} ???????????.rate{position:absolute;border-radius:4px;top:-35px;} ???????????.rate div:nth-of-type(1){line-height:25px;width:34px;background:black;border-radius:3px;color:white;text-align: center;font-size: 12px;} ???????????.rate div:nth-of-type(2){border:6px solid transparent;border-top-color:black;width:0px;position:absolute;left:11px} ???????????#box1{height:16px;position:absolute;background:blue;margin-top: 9px;left:17px;z-index:2;} ???????????.sign{border:8px solid transparent;border-left-color:black;width:0px;margin-top: 9px;z-index:2;position:relative;left:17px;} ???????????.dashed{width: 756px;height: 2px;background-image: linear-gradient(to right, #fff 0%, #fff 55%, transparent 50%);background-size: 12px 2px;background-repeat: repeat-x;position:absolute;top:16px;z-index:1;left:17px;} ???????</style> ???????<script type="text/javascript"> ???????????window.onload=function(){ ???????????????var rate=document.getElementsByClassName("rate")[0]; ???????????????var rate1=rate.firstElementChild; ???????????????rate1.innerHTML="0%"; ???????????????var box1_l=document.getElementById("box1"); ???????????????var sign_l=document.getElementsByClassName("sign")[0]; ???????????????????????????????var bottom_rate=document.getElementsByClassName("dashed")[0]; ???????????????var length_brate=bottom_rate.offsetWidth; ???????????????????????????????var speed=1; ???????????????function move(){ ???????????????????box1_l.style.width=box1_l.offsetWidth+speed+‘px‘; ???????????????????sign_l.style.left=sign_l.offsetLeft+speed+‘px‘; ???????????????????rate.style.left=rate.offsetLeft+speed+‘px‘; ???????????????????????????????????????if(rate1.innerHTML!="100%"){ ???????????????????????rate1.innerHTML=parseInt(parseInt(box1_l.style.width)/length_brate*100)+‘%‘; ???????????????????}else{ ???????????????????????clearInterval(rate_1); ???????????????????} ???????????????} ???????????????var rate_1=setInterval(move,20); ???????????} ???????</script> ???</head> ???<body> ???????<div class="boxs"> ???????????<div class="box"> ???????????????<div class="rate"> ???????????????????<div></div> ???????????????????<div></div> ???????????????</div> ???????????????<div id="box1"></div> ???????????????<div class="sign"></div> ???????????????<div class="dashed"></div> ???????????</div> ???????</div> ???</body></html>原生JS编写了个简易进度条，还请各位前辈指教~
原文地址：https://www.cnblogs.com/mycognos/p/9130906.html