簡單的進度條
阿新 • • 發佈:2017-06-02
ans cnblogs var 進度 .get tex 時間 code ima
對於我知識吸收慢,就從簡單的學起吧!簡單的進度條。感覺自己寫的代碼很差勁,所以如果有大神不經意經過的話,還望動動尊指,指點一二,多多指教^-^!
接下來我講出我的故事!我就希望我的代碼後期重用性可以好點,所以就想自己寫一些組件,這樣可以既方便又快捷。先從進度條開始!
這是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"; } }
光明的路在前方,要勇往直前,每天鼓勵自己一點點,幹了這杯雞湯。
簡單的進度條