JS实现颜色动态淡化效果
程序员文章站
2022-06-21 08:13:10
效果图:
代码如下:
颜色变换
<...
效果图:
代码如下:
<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>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
上一篇: 浅析PHP7的多进程及实例源码
下一篇: c# 数据库的 sql 参数封装类的编写