<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Untitled Document </title>
<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>