简单的进度条

时间:2021-08-17 23:01:50

对于我知识吸收慢,就从简单的学起吧!简单的进度条。感觉自己写的代码很差劲,所以如果有大神不经意经过的话,还望动动尊指,指点一二,多多指教^-^!

接下来我讲出我的故事!我就希望我的代码后期重用性可以好点,所以就想自己写一些组件,这样可以既方便又快捷。先从进度条开始!

 这是jq宝宝:

/*
进度条(长方形简单)
传入class、宽度width、长度height、边框颜色border、圆角radius、进度条颜色bgColor,时间time
*/
function getProBar(obj){
$(obj.class).css({
"width":obj.width,
"height":obj.height,
"border":obj.border,
"borderRadius":obj.radius
});
$(obj.class).append(
"<div id='sProBar'></div>");
$(
"#sProBar").css({
"width": "0px",
"height":obj.height,
"background-color": obj.bgColor,
"borderRadius":obj.radius
});
$(
"#sProBar").animate({width:obj.width},obj.time);
}

这是js宝宝:

/*
进度条(长方形简单)
传入大div框id1、小div框id2、宽度width、长度height、边框颜色border、圆角radius、进度条颜色bgColor
*/
function getProBar(obj){
var id1 = doc.getElementById(obj.id1),
id2
= doc.getElementById(obj.id2);
// //兼容于chrome,Safari等基于webkit的浏览器
// d2.style.webkitAnimationPlayState="running";
// //兼容firefox浏览器
// d2.style.mozAnimationPlayState="running";

id1.style.cssText
= "width:" + obj.width + ";height:" + obj.height + ";border:" + obj.border + ";border-radius:" + obj.radius ;
id2.style.cssText
= "width:0px;" + "height:" + obj.height + ";background-color:" + obj.bgColor +";border-radius:" + obj.radius + ";transition-duration:" + obj.time;
var a = id1.clientWidth;
for(var i=0; i <= a; i++){
id2.style.width
= i + "px";
}
}

光明的路在前方,要勇往直前,每天鼓励自己一点点,干了这杯鸡汤。