标签：接下来 class round ++ 长度 var 勇往直前 nim running
对于我知识吸收慢，就从简单的学起吧！简单的进度条。感觉自己写的代码很差劲，所以如果有大神不经意经过的话，还望动动尊指，指点一二，多多指教^-^!
接下来我讲出我的故事！我就希望我的代码后期重用性可以好点，所以就想自己写一些组件，这样可以既方便又快捷。先从进度条开始！
这是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"; } }
光明的路在前方，要勇往直前，每天鼓励自己一点点，干了这杯鸡汤。
标签：接下来 class round ++ 长度 var 勇往直前 nim running
原文地址：http://www.cnblogs.com/z-w-r/p/6932118.html
