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 相关文章推荐
jQuery中nextUntil()方法用法实例
Jan 07 Javascript
浅谈js基本数据类型和typeof
Aug 09 Javascript
基于JavaScript实现购物网站商品放大镜效果
Sep 06 Javascript
JS 实现随机验证码功能
Feb 15 Javascript
VueJs组件prop验证简单介绍
Sep 12 Javascript
利用jsonp与代理服务器方案解决跨域问题
Sep 14 Javascript
angularjs实现简单的购物车功能
Sep 21 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
Jan 24 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
Mar 05 Javascript
vue-router 中 meta的用法详解
Nov 01 Javascript
Vue移动端项目实现使用手机预览调试操作
Jul 18 Javascript
vue 中的动态传参和query传参操作
Nov 09 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程序中防止盗链
2008/04/09 PHP
PHP变量内存分配问题记录整理
2013/11/27 PHP
PHP json_decode函数详细解析
2014/02/17 PHP
基于PHP的简单采集数据入库程序
2014/07/30 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
Array.prototype.concat不是通用方法反驳[译]
2012/09/20 Javascript
从js向Action传中文参数出现乱码问题的解决方法
2013/12/29 Javascript
用js通过url传参把数据从一个页面传到另一个页面
2014/09/01 Javascript
分享20个提升网站界面体验的jQuery插件
2014/12/15 Javascript
Node.js抓取中文网页乱码问题和解决方法
2015/02/10 Javascript
JS运动基础框架实例分析
2015/03/03 Javascript
超级简单实现JavaScript MVC 样式框架
2015/03/24 Javascript
简介JavaScript中fixed()方法的使用
2015/06/08 Javascript
判断是否存在子节点的实现代码
2016/05/18 Javascript
深入理解jquery中的each用法
2016/12/14 Javascript
jquery滚动条插件slimScroll使用方法
2017/02/09 Javascript
jquery实现全选、全不选以及单选功能
2017/03/23 jQuery
vue中用动态组件实现选项卡切换效果
2017/03/25 Javascript
javascript中的面向对象
2017/03/30 Javascript
NVM安装nodejs的方法实用步骤
2019/01/16 NodeJs
Python标准库之多进程(multiprocessing包)介绍
2014/11/25 Python
python中list列表的高级函数
2016/05/17 Python
Python 搭建Web站点之Web服务器网关接口
2016/11/06 Python
Python编程判断一个正整数是否为素数的方法
2017/04/14 Python
Python模拟三级菜单效果
2017/09/11 Python
Django中的CBV和FBV示例介绍
2018/02/25 Python
Python面向对象编程基础实例分析
2020/01/17 Python
Django权限设置及验证方式
2020/05/13 Python
Perry Ellis官网:美国男士品味服装
2016/12/09 全球购物
美国著名手表网站:Timepiece
2017/11/15 全球购物
Troy-Bilt官网:草坪割草机、吹雪机、分蘖机等
2019/02/19 全球购物
幼儿园数学教学反思
2014/02/02 职场文书
蜜蜂引路教学反思
2014/02/04 职场文书
世界十大狙击步枪排行榜
2022/03/20 杂记
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
2022/09/23 HTML / CSS
HTML 里 img 元素的 src 和 srcset 属性的区别详解
2023/05/21 HTML / CSS