当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JS实现颜色动态淡化效果

JS实现颜色动态淡化效果

2019年06月13日  | 移动技术网IT编程  | 我要评论

效果图：

代码如下：

<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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持移动技术网！

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网