JS实现颜色动态淡化效果

div{width:100px;height:100px;margin:100px auto;border:1px solid white;border-radius:50%;}

input{position:absolute;left:100px;top:100px;}

var a=255,b=165,c=0,w=100,box;

function cont()

{

a=255;

b=165;

c=0;

w=100;

box = document.createElement('div');

document.body.appendChild(box);

}

function changeColor()

{

document.getElementsByTagName('input')[0].disabled="disabled";

box.style.backgroundColor="RGB("+a+","+b+","+c+")";

box.style.width=w;

box.style.height=w;

c++;

if(c>=166)b++;

w++;

if(a>=255&&b>255&&c>255)

{

box.parentNode.removeChild(box);

document.getElementsByTagName('input')[0].removeAttribute('disabled');

return false;

}

setTimeout(changeColor,1);

}

document.getElementsByTagName('input')[0].onclick=function()

{

cont();

changeColor();

}