JS实现颜色动态淡化效果
更新时间：2017年03月06日 15:58:37 作者：欧阳翠花
本文主要介绍了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显示和隐藏ul列表的方法,涉及javascript针对页面元素遍历及显示与隐藏的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
这篇文章主要介绍了小程序的上传文件接口的注意解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
这篇文章主要介绍了原生JS实现循环Nodelist Dom列表的4种方式,结合具体实例形式分析了javascript循环遍历Nodelist Dom列表的常用操作技巧,需要的朋友可以参考下2018-02-02
这篇文章介绍了js获取或设置当前窗口url参数的小例子，有需要的朋友可以参考一下2013-10-10
Javascript访问样式表--又一篇好文章2009-08-08
这篇文章主要为大家详细介绍了JavaScript或jQuery实现切换页面效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
数组的去重方法,其实无论实在实际项目还是在面试中都会有用到的,下面这篇文章主要给大家介绍了非常全面的12种js数组去重的方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
JavaScript 无缝上下左右滚动加定高定宽停顿效果(兼容ie/ff)
JavaScript 指定宽度高度的无间断滚动实现代码，这样的效果适合作为焦点新闻的轮播显示。2010-03-03
今天小编就为大家分享一篇解决layui的radio属性或别的属性没显示出来的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
解决使用bootstrap的dropdown部件时报错：error：Bootstrap dropdown require
这篇文章主要介绍了使用bootstrap的dropdown部件时报错：error：Bootstrap dropdown require Popper.js ,小编把问题描述和解决方案分享给大家，需要的朋友可以参考下2018-08-08
最新评论