您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
效果图:
代码如下:
<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>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持亿速云!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。