<!

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

>