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 相关文章推荐
javascript 简单抽屉效果的实现代码
Mar 09 Javascript
计算世界完全对称日的js代码,粗糙版
Nov 04 Javascript
jQuery焦点图切换特效插件封装实例
Aug 18 Javascript
js 获取浏览器版本以此来调整CSS的样式
Jun 03 Javascript
JavaScript代码复用模式详解
Nov 07 Javascript
jQuery EasyUI 入门必看
Jun 03 Javascript
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
vue-router项目实战总结篇
Feb 11 Javascript
Vue 项目代理设置的优化
Apr 17 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
Aug 03 Javascript
微信小程序支付前端源码
Aug 29 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
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中empty is_null和isset的测试
2013/06/29 PHP
php实现判断访问来路是否为搜索引擎机器人的方法
2015/04/15 PHP
yii2高级应用之自定义组件实现全局使用图片上传功能的方法
2016/10/08 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
js表数据排序 sort table data
2009/02/18 Javascript
Node.js中HTTP模块与事件模块详解
2014/11/14 Javascript
jQuery代码实现发展历程时间轴特效
2015/07/30 Javascript
AngularJS内建服务$location及其功能详解
2016/07/01 Javascript
js中DOM三级列表(代码分享)
2017/03/20 Javascript
jQuery动画_动力节点节点Java学院整理
2017/07/04 jQuery
基于Vue2.X的路由和钩子函数详解
2018/02/09 Javascript
解决vue 更改计算属性后select选中值不更改的问题
2018/03/02 Javascript
Vue父子组建的简单通信之控制开关Switch的实现
2018/06/04 Javascript
微信小程序如何自定义table组件
2019/06/29 Javascript
微信小程序之几种常见的弹框提示信息实现详解
2019/07/11 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
2020/01/08 Javascript
Python常用内置模块之xml模块(详解)
2017/05/23 Python
python实现微信跳一跳辅助工具步骤详解
2018/01/04 Python
利用python GDAL库读写geotiff格式的遥感影像方法
2018/11/29 Python
解决python3 Pycharm上连接数据库时报错的问题
2018/12/03 Python
python sort、sort_index方法代码实例
2019/03/28 Python
Django之无名分组和有名分组的实现
2019/04/16 Python
python使用 zip 同时迭代多个序列示例
2019/07/06 Python
VSCode中自动为Python文件添加头部注释
2019/11/14 Python
Python模拟登录之滑块验证码的破解(实例代码)
2019/11/18 Python
python Socket网络编程实现C/S模式和P2P
2020/06/22 Python
python的launcher用法知识点总结
2020/08/07 Python
老海军美国官网:Old Navy
2016/09/05 全球购物
保加利亚手表、香水、化妆品和珠宝购物网站:Brasty.bg
2020/04/22 全球购物
行政助理岗位职责
2013/11/10 职场文书
中学生运动会口号
2014/06/07 职场文书
四风自我剖析材料
2014/09/30 职场文书
防灾减灾标语
2014/10/07 职场文书
2016年五四青年节校园广播稿
2015/12/17 职场文书
Python读取文件夹下的所有文件实例代码
2021/04/02 Python