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 >

< 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; height:0px; " ></ div >

</ body >
</ html >