JS无聊之作

时间：2010-09-17 来源：喵喵

代码 <!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; width:0px; "></div>

</body>
</html>