效果展示：
个人认为良性的互动与循序渐进的练习，才是学习好的好习惯。我也会以此践行我的学习总结之路。
初步布局与样式：
<style>
.box {
width: 200px;
border: 1px solid black;
border-radius: 10px;
overflow: hidden;
}
.inner {
width: 200px;
background-color: blue;
}
</style>
<body>
<div class="box">
<div class="inner"
0%
</div
</div>
<button id="btn" 开始</button>
</body>
初步效果：
//与点击后表现相同，其实不然。
overflow:hidden;符合圆角边宽。
中间部分：
var oText =document.getElementsByClassName("inner")[0];
var oBtn =document.getElementById("btn");
oBtn.onclick =function() {
run();
}
function run() {
if(oText.offsetWidth < 200)
{
oText.innerText = parseInt(oText.innerText)+1+"%";
oText.style.width =oText.offsetWidth+2+"px";
requestAnimationFrame(run);
}
}
class属性获得数组，所以要有下标。
innerText识别字符型
offersetWidth获取宽度，style.width设置宽度。
有任何问题，欢迎指教。谢谢！
