JS实现颜色动态淡化效果

效果图：

代码如下：

htmlheadtitle颜色变换/title style type=' text/CSS ' div { width :100 px；高度：100 pxmargin :100 px auto order :1 px纯白色；边界半径：50%;}输入{ position : absolute eleft :100 pxtop :100 px }/style/head dyinput type=' button ' value='点击执行颜色淡化效果/script type=' text/JavaScript ' var a=255，b=165，c=0，w=100，box函数cont(){ a=255；b=165 c=0；w=100box=文档。创建元素(' div ')；document.body.appendChild(框);}函数更改颜色(){文档。getelementsbytagname(' input ')[0].disabled=' disabledbox。风格。background COlOr=' RGB '(a '，' b '，' c ')；盒子。风格。宽度=w；盒子。风格。高度=w；如果(c=166)b；w；if(a=255 b255 c255){ box。父节点。移除子(框)；文件。getelementsbytagname(' input ')[0].移除属性(“已禁用”)；返回false}setTimeout(changeColor，1)；}文档。getelementsbytagname(' input ')[0].onclick=function(){ cont()；更改颜色()；}/脚本/正文/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！