JS实现颜色动态淡化效果

作者：欧阳翠花时间：2024-02-24 13:19:51　

效果图：

代码如下：

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

来源：http://www.qdfuns.com/notes/42099/f59b152dfacd20a612088fb5f358e6c9.html

标签：js,颜色

投稿

JS实现颜色动态淡化效果

猜你喜欢

python中multiprosessing模块的Pool类中的apply函数和apply_async函数的区别

asp.net mvc4 mysql制作简单分页组件（部分视图）

如何将自己的python库打包成wheel文件并上传到pypi

常见的python正则用法实例讲解

Python编程itertools模块处理可迭代集合相关函数

Python prettytable模块应用详解

利用Python生成随机验证码详解

asp.net“服务器应用程序不可用” 解决方法

Python 多线程知识点总结及实例用法

Python实现在tkinter中使用matplotlib绘制图形的方法示例

不错的一篇关于javascript-prototype继承

单步调试 step into/step out/step over 区别说明

Python中property属性实例解析

EXCEL数据上传到SQL SERVER中的简单实现方法

Java使用JDBC连接数据库的详细步骤

Python 类的魔法属性用法实例分析

Django中cookie的基本使用方法示例

vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理

Oracle生成随机数字、字符串、日期、验证码及 UUID的方法

关于tensorflow softmax函数用法解析