代码
<!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>
<script>
var handleUp;
var handleDown;
function changeUp()
{
var div= document.getElementById('div1');
if(parseInt(div.style.height)<=200)
{
div.style.height=(parseInt(div.style.height)+8).toString()+'px';
div.style.width=(parseInt(div.style.width)+8).toString()+'px';
}
else if(parseInt(div.style.height)>200)
{
clearInterval(handleUp);
showDown();
}
changeColor();
}
function changeDown()
{
var div= document.getElementById('div1');
div.style.height=(parseInt(div.style.height)-8).toString()+'px';
div.style.width=(parseInt(div.style.width)-8).toString()+'px';
if(parseInt(div.style.height)==0)
{
clearInterval(handleDown);
showUp();
}
changeColor();
}
function showUp()
{
handleUp=setInterval("changeUp()",20);
var div= document.getElementById('div1');
}
function showDown()
{
handleDown=setInterval("changeDown()",20);
}
function changeColor()
{
var div= document.getElementById('div1');
var width=parseInt(div.style.height,10);
if(width>=0&&width<=9)
{
div.style.backgroundColor='#C0C0C0';
}
else if(width>=10&&width<=19)
{
div.style.backgroundColor='lavender';
}
else if(width>=20&&width<=29)
{
div.style.backgroundColor='plum';
}
else if(width>=30&&width<=39)
{
div.style.backgroundColor='highlight';
}
else if(width>=40&&width<=49)
{
div.style.backgroundColor='goldenrod';
}
else if(width>=50&&width<=59)
{
div.style.backgroundColor='Fuchsia';
}
else if(width>=60&&width<=69)
{
div.style.backgroundColor='slategray';
}
else if(width>=70&&width<=99)
{
div.style.backgroundColor='#9999FF';
}
else if(width>=100&&width<=139)
{
div.style.backgroundColor='#003333';
}
else if(width>=140&&width<=159)
{
div.style.backgroundColor='tomato';
}
else if(width>=160&&width<=179)
{
div.style.backgroundColor='deepskyblue';
}
else if(width>=180&&width<=210)
{
div.style.backgroundColor='hotpink';
}
}
</script>
</head>
<body>
<input type="button" onclick="showUp();this.disabled='disabled'" value="click me!"/><br />
<div id="div1" style="margin-left:auto; margin-right:auto; 0px; height:0px;"></div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
var handleUp;
var handleDown;
function changeUp()
{
var div= document.getElementById('div1');
if(parseInt(div.style.height)<=200)
{
div.style.height=(parseInt(div.style.height)+8).toString()+'px';
div.style.width=(parseInt(div.style.width)+8).toString()+'px';
}
else if(parseInt(div.style.height)>200)
{
clearInterval(handleUp);
showDown();
}
changeColor();
}
function changeDown()
{
var div= document.getElementById('div1');
div.style.height=(parseInt(div.style.height)-8).toString()+'px';
div.style.width=(parseInt(div.style.width)-8).toString()+'px';
if(parseInt(div.style.height)==0)
{
clearInterval(handleDown);
showUp();
}
changeColor();
}
function showUp()
{
handleUp=setInterval("changeUp()",20);
var div= document.getElementById('div1');
}
function showDown()
{
handleDown=setInterval("changeDown()",20);
}
function changeColor()
{
var div= document.getElementById('div1');
var width=parseInt(div.style.height,10);
if(width>=0&&width<=9)
{
div.style.backgroundColor='#C0C0C0';
}
else if(width>=10&&width<=19)
{
div.style.backgroundColor='lavender';
}
else if(width>=20&&width<=29)
{
div.style.backgroundColor='plum';
}
else if(width>=30&&width<=39)
{
div.style.backgroundColor='highlight';
}
else if(width>=40&&width<=49)
{
div.style.backgroundColor='goldenrod';
}
else if(width>=50&&width<=59)
{
div.style.backgroundColor='Fuchsia';
}
else if(width>=60&&width<=69)
{
div.style.backgroundColor='slategray';
}
else if(width>=70&&width<=99)
{
div.style.backgroundColor='#9999FF';
}
else if(width>=100&&width<=139)
{
div.style.backgroundColor='#003333';
}
else if(width>=140&&width<=159)
{
div.style.backgroundColor='tomato';
}
else if(width>=160&&width<=179)
{
div.style.backgroundColor='deepskyblue';
}
else if(width>=180&&width<=210)
{
div.style.backgroundColor='hotpink';
}
}
</script>
</head>
<body>
<input type="button" onclick="showUp();this.disabled='disabled'" value="click me!"/><br />
<div id="div1" style="margin-left:auto; margin-right:auto; 0px; height:0px;"></div>
</body>
</html>