JS实现颜色动态淡化效果


Posted in Javascript onMarch 06, 2017

效果图:

JS实现颜色动态淡化效果

JS实现颜色动态淡化效果

代码如下:

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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
通用JS事件写法实现代码
Jan 07 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
Oct 08 Javascript
jQuery+JSON实现AJAX二级联动实例分析
Dec 18 Javascript
使用jquery.form.js实现图片上传的方法
May 05 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
Jan 04 Javascript
jquery实现超简单的瀑布流布局【推荐】
Mar 08 Javascript
vue实现商城购物车功能
Nov 27 Javascript
Vue2.0实现组件数据的双向绑定问题
Mar 06 Javascript
vue中element 上传功能的实现思路
Jul 06 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
Jan 31 Javascript
使用Angular material主题定义自己的组件库的配色体系
Sep 04 Javascript
详解Vue3中对VDOM的改进
Apr 23 Javascript
vue模板语法-插值详解
Mar 06 #Javascript
js中的面向对象入门
Mar 06 #Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
Mar 06 #Javascript
Vue 2.x教程之基础API
Mar 06 #Javascript
jQuery实现获取h1-h6标题元素值的方法
Mar 06 #Javascript
一道面试题引发的对javascript类型转换的思考
Mar 06 #Javascript
JavaScript函数参数的传递方式详解
Mar 06 #Javascript
You might like
PHP中去掉字符串首尾空格的方法
2012/05/19 PHP
如何修改和添加Apache的默认站点目录
2013/07/05 PHP
PDO::quote讲解
2019/01/29 PHP
基于PHP实现短信验证码发送次数限制
2020/07/11 PHP
Firefox getBoxObjectFor getBoundingClientRect联系
2008/10/26 Javascript
javascript测试题练习代码
2012/10/10 Javascript
js 窗口抖动示例
2013/09/04 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
2016/07/11 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
2016/08/30 Javascript
jQuery获取选中单选按钮radio的值
2016/12/27 Javascript
angular+webpack2实战例子
2017/05/23 Javascript
js实现拖拽上传图片功能
2017/08/01 Javascript
妙用缓存调用链实现JS方法的重载
2018/04/30 Javascript
vue-cli V3.0版本的使用详解
2018/10/24 Javascript
利用hasOwnProperty给数组去重的面试题分享
2018/11/05 Javascript
Python中subprocess的简单使用示例
2015/07/28 Python
TensorFlow实现Batch Normalization
2018/03/08 Python
python数据结构之线性表的顺序存储结构
2018/09/28 Python
Python Cookie 读取和保存方法
2018/12/28 Python
了解不常见但是实用的Python技巧
2019/05/23 Python
python自动化UI工具发送QQ消息的实例
2019/08/27 Python
Python API自动化框架总结
2019/11/12 Python
Python bisect模块原理及常见实例
2020/06/17 Python
Python 下载Bing壁纸的示例
2020/09/29 Python
详解如何使用Pytest进行自动化测试
2021/01/14 Python
澳大利亚先进的皮肤和激光诊所购物网站:Soho Skincare
2018/10/15 全球购物
文史专业毕业生自荐信
2013/11/17 职场文书
装饰资料员岗位职责
2013/12/30 职场文书
小班秋游活动方案
2014/02/22 职场文书
校友会致辞
2015/07/30 职场文书
教学副校长工作总结
2015/08/13 职场文书
2016年大学生就业指导课心得体会
2015/10/09 职场文书
关于元旦的广播稿2016
2015/12/17 职场文书
2016党校学习心得体会范文
2016/01/07 职场文书
超外差式晶体管收音机的组装与统调
2021/04/22 无线电
Android Flutter实现3D动画效果示例详解
2022/04/07 Java/Android