<div class="gradeinfo" id="gradeinfo" style="display: none">
<!-- <div>
<span>等级</span>
<span class="grade">5</span>
</div>-->
<div class="htmleaf">
<div class="perinfo"></div>
</div>
</div>
<input type="button" onclick="aa()" value="触发按钮">
css
.gradeinfo {
display:flex;
flex-flow:row nowrap;
justify-content:center;
align-items:center;
}
.htmleaf {
width:300px;
height:30px;
line-height:30px;
border-radius:15px;
box-shadow:0px 0px 1px 1px #888888 inset;
display:flex;
align-items:center;
margin-left:10px;
position:relative;
overflow:hidden;
}
.perinfo {
margin-left:2px;
height:26px;
border-radius:15px;
position:absolute;
left:0px;
}
js
function show(){
//可在personalinfo设置等级的存储，直接取出来。还要知道当前等级最高和最低的经验值
var a = [1, 2, 3, 4, 5, 6, 7, 8, 9];
//设置父级的width为100%，计算子级的宽度
var htmleaf_ = 3500;
var perinfo_ = 3000;
var htmleaf_w = $(".htmleaf").width();
var perinfo_w = parseFloat(perinfo_ / htmleaf_) * htmleaf_w;
$(".perinfo").css({
"left": -perinfo_w,
"width": perinfo_w,
"background": "red"
});
$(".perinfo").animate({
"left": "0px"
}, 700);
}
function sgowdiv(){
document.getElementById("gradeinfo").style.display=""; //显示进度条
}
function aa() { //触发
sgowdiv();
show();
// a();
}
