js实现正方形颜色从下往上升的效果

<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><script src="jquery-1.8.2.js" type="text/javascript"></script><script type="text/javascript"> $（function（）{interid=setInterval（Showgao,1）;var i=1;$（"#top"）.height（8）;$（"#buttom"）.css（"marginTop",42）;$（"#buttom"）.css（"background","#d6d6d6"）;function Showgao（）{var oldH=$（"#buttom"）.css（"marginTop"）;var h= oldH.substr（0,oldH.indexOf（"px"））;$（"#buttom"）.css（"marginTop",h-1）;$（"#buttom"）.height（i）;i++;if（i==42）{clearInterval（interid）;}}interid1=setInterval（Showgao1,1）;var i1=1;$（"#top1"）.height（4）;$（"#buttom1"）.css（"marginTop",46）;$（"#buttom1"）.css（"background","red"）;function Showgao1（）{var oldH=$（"#buttom1"）.css（"marginTop"）;var h= oldH.substr（0,oldH.indexOf（"px"））;$（"#buttom1"）.css（"marginTop",h-1）;$（"#buttom1"）.height（i1）;i1++;if（i1==30）{clearInterval（interid1）;}}}）;</script><body><style>.container{width:20px;height:50px;border:1px solid #999;font-size:10px;float:left;margin-left:5px;}</style><div class="container" onclick="javascript:alert（1）;" > <div id="top">82%</div> <div id="buttom"></div></div><div class="container" onclick="javascript:alert（1）;" > <div id="top1" >62%</div> <div id="buttom1"></div></div></body></html>