JS实现颜色动态淡化效果

JS实现颜色动态淡化效果

JS实现颜色动态淡化效果

代码如下:

<html> <head> <title>颜色变换</title> <style type="text/css"> div{width:100px;height:100px;margin:100px auto;border:1px solid white;border-radius:50%;} input{position:absolute;left:100px;top:100px;} </style> </head> <body> <input type="button" value="点击执行颜色淡化效果"/> <script type="text/javascript"> 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(); } </script> </body> </html>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwwpsj.html