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的实现回车键Enter切换焦点
Sep 14 Javascript
DIV菜单层实现代码
Nov 19 Javascript
js截取固定长度的中英文字符的简单实例
Nov 22 Javascript
window resize和scroll事件的基本优化思路
Apr 29 Javascript
Javascript基础学习笔记(菜鸟必看篇)
Jul 22 Javascript
有趣的bootstrap走动进度条
Dec 01 Javascript
jQuery加密密码到cookie的实现代码
Apr 18 jQuery
js分页之前端代码实现和请求处理
Aug 04 Javascript
angular2路由切换改变页面title的示例代码
Aug 23 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
Jan 16 Javascript
了解JavaScript中的选择器
May 24 Javascript
jquery实现购物车基本功能
Oct 25 jQuery
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
什么是短波收听SWL
2021/03/01 无线电
php自动加载autoload机制示例分享
2014/02/20 PHP
PHP计算近1年的所有月份
2017/03/13 PHP
Thinkphp整合阿里云OSS图片上传实例代码
2019/04/28 PHP
基于jQuery的仿flash的广告轮播代码
2010/11/04 Javascript
js隐式全局变量造成的bug示例代码
2014/04/22 Javascript
js实现精美的图片跟随鼠标效果实例
2015/05/16 Javascript
jQuery.form插件的使用及跨域异步上传文件
2016/04/27 Javascript
聊一聊JS中this的指向问题
2016/06/17 Javascript
ionic组件ion-tabs选项卡切换效果实例
2016/08/27 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
2017/01/16 Javascript
详解如何用webpack打包一个网站应用项目
2017/07/12 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
2018/08/28 Javascript
Vue 监听列表item渲染事件方法
2018/09/06 Javascript
jquery实现Ajax请求的几种常见方式总结
2019/05/28 jQuery
Javascript 对象(object)合并操作实例分析
2019/07/30 Javascript
vue开发拖拽进度条滑动组件
2019/09/21 Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
2020/04/14 Javascript
微信小程序实现简单的select下拉框
2020/11/23 Javascript
python excel使用xlutils类库实现追加写功能的方法
2018/05/02 Python
python 读取文件并替换字段的实例
2018/07/12 Python
Python调用adb命令实现对多台设备同时进行reboot的方法
2018/10/15 Python
Python中GeoJson和bokeh-1的使用讲解
2019/01/03 Python
Pytorch 抽取vgg各层并进行定制化处理的方法
2019/08/20 Python
python 使用OpenCV进行简单的人像分割与合成
2021/02/02 Python
Python调用SMTP服务自动发送Email的实现步骤
2021/02/07 Python
Html5页面二次分享的实现
2018/07/30 HTML / CSS
英国最大的自有市场,比亚马逊便宜:Flubit
2019/03/19 全球购物
爱国主义教育活动总结
2014/05/07 职场文书
倡议书格式模板
2014/05/13 职场文书
生产操作工岗位职责
2014/09/16 职场文书
小学生运动会通讯稿
2014/09/23 职场文书
2015初一年级组工作总结
2015/07/24 职场文书
vue项目支付功能代码详解
2022/02/18 Vue.js
教你部署vue项目到docker
2022/04/05 Vue.js
Java 数组的使用
2022/05/11 Java/Android