看效果:
查看演示
上代码:
CSS:
.bar{
width: 300px;
font-size: 0;
}
.bar .desc,.bar .num,.bar .progressBar{
display: inline-block;
font-size: 16px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.bar .desc,.bar .num{
width: 20%;
}
.bar .num{}
.bar .progressBar{
width: 60%;
height: 6px;
background-color: #000;
}
.bar .progressBar .percent{
float: left;
height: 100%;
}
.bar .progressBar .percent:before{
content: '';
float: left;
width: 0;
height: 100%;
background-color: #f00;
-webkit-animation: barAnimate 1s 0.4s forwards;
}
@-webkit-keyframes barAnimate {
to{
width: 100%;
}
}
HTML:
<div class="bar"></div>
JS:
$(function () {
new Bar();
});
function Bar() {
this.data=null;
this.$el=$(".bar");
this.init();
}
Bar.prototype={
init:function () {
this.setData();
this.create();
this.bindEvent();
},
//创建DOM
create:function () {
var barData=this.data;
var html="";
for(var i=0;i<barData.length;i++){
html+='<div class="row">\n' +
' <span class="desc">'+barData[i].desc+'</span>\n' +
' <span class="num">'+barData[i].num+'</span>\n' +
' <span class="progressBar">\n' +
' <span class="percent"></span>\n' +
' </span>\n' +
' </div>'
}
this.$el.empty().append(html);
},
//绑定事件
bindEvent:function () {
this.$el.find(".row").each(function (i,ele) {
var num=parseInt($(ele).find(".num").text());
var value=100;//设置总值为100
$(ele).find(".percent").css("width",(num/value)*100+"%")
})
},
//设置数据
setData:function () {
var barData=[
{desc:'语文',num:this.getRandomInt(0,100)},
{desc:'数学',num:this.getRandomInt(0,100)},
{desc:'英语',num:this.getRandomInt(0,100)},
];
this.data=barData;
},
//得到一个两数之间的随机整数
getRandomInt:function (min,max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min;
}
}