html中时间进条形度条,HTML、CSS、JS制作条形可动画进度条

看效果：

image.png

查看演示

上代码：

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:

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

html+='

\n' +

' '+barData[i].desc+'\n' +

' '+barData[i].num+'\n' +

' \n' +

' \n' +

' \n' +

'

'

}

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;

}

}