javascript计算渐变颜色的实例
javascript计算渐变颜色的实例
有时候,一个表格或者一片区域内,需要若干同色系从浅到深的颜色,如图所示:
如果需要的颜色少,则颜色的差异较大,需要的颜色多,则颜色差异小,如下图:
这时,就用到了同色系渐变颜色的计算,算法如下:
function getItemColors (colorLevel) { var colors= []; //默认的最深颜色 var red = 134,green = 108, blue = 184; //最浅颜色是239,239,239 比如:最浅颜色的red是 239 则差值为239-134=105 var maxRed = 105,maxGreen = 131,maxBlue = 55; var level = colorLevel; while(level--) { colors.push( 'rgb('+red +','+green+','+blue+')'); red += parseInt(maxRed/colorLevel); green += parseInt(maxGreen/colorLevel); blue += parseInt(maxBlue/colorLevel); } return colors; }
如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
相关推荐
-
jQuery与js实现颜色渐变的方法
本文实例讲述了jQuery与js实现颜色渐变的方法.分享给大家供大家参考,具体如下: 1.目的 本来想的是 提示用户应该点某个按钮 这个功能,就想着让这个按钮div的边框变成醒目的颜色然后逐渐变白. 在网上搜了搜,本来想使用jQuery的animate,后来发现这个方法只能用来进行长度的渐变.还有就是需要下载jQuery的颜色渐变插件来实现,感觉挺麻烦的,就自己用土办法实现了. 2.原理 先获得初始颜色的rgb,再获得终止颜色的rgb,使用rgb三个数字的差值,从初始颜色的rgb逐渐过渡到终止颜
-
js实现颜色阶梯渐变效果(Gradient算法)
html中颜色可以使用rgb和hex方式来表示. 在色彩中,色相.明度.纯度也都可以产生渐变效果,并会表现出具有丰富层次的美感.本文主要讲述两种颜色RGB数值的梯级渐变算法. 其中如如16进制颜色如#336600分别表示rgb模式中r的值为16进制33(即),g的值为16进制的66,和b为16进制的00,转换后用rgb完整表述为:rgb(51,102,0). 其中使用16进制进行加减乘除不方便,尤其还使用了rgb的16进制颜色组合(#336600).因此我们可以将16进制转换为rgb单个进行梯级
-
漂亮! js实现颜色渐变效果
今天做组织机构,要分级别显示颜色,自己计算半天也没算出颜色渐变的方法,出来总是花里胡哨的难看的不要不要的,所以查了一下,找到一个js代码,试了试,很完美哦! <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <script src
-
神奇!js+CSS+DIV实现文字颜色渐变效果
本文实例为大家分享了DIV+CSS+JS实现的文字颜色渐变效果,供大家参考,具体内容如下 下面是 CSS 部分代码: <!--CSS代码开始--> body{ font:12px/1.5 Microsoft Yahei; } h3{ padding:10px; margin:0; background-color:#999; color:#fff; font:16px/1.5 Microsoft Yahei; text-align:center; } .box{ position:relati
-
JavaScript实现的鼠标响应颜色渐变效果完整实例
本文实例讲述了JavaScript实现的鼠标响应颜色渐变效果.分享给大家供大家参考,具体如下: 运行效果图如下: 完整代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/199
-
使用three.js 画渐变的直线
Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机.光影.材质等各种对象.你可以在它的主页上看到许多精彩的演示.不过,这款引擎目前还处在比较不成熟的开发阶段,其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度(尤其是文档的匮乏)three.js的代码托管在github上面. http://github.com/mrdoob/three.js/ 我们来看实例吧 <!DOCTYPE html> <html> <head>
-
JS实现颜色梯度与渐变效果完整实例
本文实例讲述了JS实现颜色梯度与渐变效果的方法.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xht
-
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
本文实例介绍了js实现图片轮播相册,具有过渡渐变效果,分享给大家供大家参考,具体内容如下 思路很简单,用2个属性保存当前图片和上一张图片,用2个定时器分别控制透明度和当前过渡的图片. <HTML> <HEAD> <TITLE></TITLE> </HEAD> <style> #cnt{width:100%;height:80%;} .ctrl{text-align:center;border:1px solid gray;font-s
-
javascript计算渐变颜色的实例
javascript计算渐变颜色的实例 有时候,一个表格或者一片区域内,需要若干同色系从浅到深的颜色,如图所示: 如果需要的颜色少,则颜色的差异较大,需要的颜色多,则颜色差异小,如下图: 这时,就用到了同色系渐变颜色的计算,算法如下: function getItemColors (colorLevel) { var colors= []; //默认的最深颜色 var red = 134,green = 108, blue = 184; //最浅颜色是239,239,239 比如:最浅颜色的re
-
JavaScript canvas绘制渐变颜色的矩形
本文实例为大家分享了canvas绘制渐变颜色的矩形的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { border: 1px solid #ccc; } /* .linearGradient{ wi
-
js实现可得到不同颜色值的颜色选择器实例
本文实例讲述了js实现可得到不同颜色值的颜色选择器.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>js颜色选择器,可得到不同的颜色值</title> </head> <body> <input id=kkk1 style=position:absolute;left:0;top:0> <input id=kkk2 style=position:absolut
-
JavaScript计算两个日期时间段内日期的方法
本文实例讲述了JavaScript计算两个日期时间段内日期的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: /************************* * 计算两个日期时间段内所有日期 * * @param value1 * 开始日期 YYYY-MM-DD * @param value2 * 结束日期 * return 日期数组 */ function dataScope(value1, value2
-
JavaScript之创意时钟项目(实例讲解)
"时钟展示项目"说明文档(文档尾部附有相应代码) 一.最终效果展示: 二.项目亮点 1.代码结构清晰明了 2.可以实时动态显示当前时间与当前日期 3.界面简洁.美观.大方 4.提高浏览器兼容性 三.知识点汇总: jQuery.原生javascript.css3.h5 四.重难点解释 1.各个指针的旋转角度的获取 首先要明确如下概念: 时钟指针旋转一周360度 时针: 表盘上共有12小时,每经过一小时,要旋转30度: 分针: 表盘上共有60个小格子,分针每走一分钟,经过一个小格子,转动6
-
COM组件中调用JavaScript函数详解及实例
COM组件中调用JavaScript函数详解及实例 要求是很简单的,即有COM组件A在IE中运行,使用JavaScript(JS)调用A的方法longCalc(),该方法是一个耗时的操作,要求通知IE当前的进度.这就要求使用回调函数,设其名称为scriptCallbackFunc.实现这个技术很简单: 1 .组件方(C++) 组件A 的方法在IDL中定义: [id(2)] HRESULT longCalc([in] DOUBLE v1, [in] DOUBLE v2, [in, optional
-
Android编程实现自定义渐变颜色效果详解
本文实例讲述了Android编程实现自定义渐变颜色效果.分享给大家供大家参考,具体如下: 你是否已经厌恶了纯色的背景呢?那好,Android提供给程序员自定义渐变颜色的接口,让我们的界面炫起来吧. xml定义渐变颜色 首先,你在drawable目录下写一个xml,代码如下 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.
-
基于javascript实现随机颜色变化效果
本文实例讲解了基于javascript实现随机颜色变化效果,分享给大家供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>随机颜色变化效果</title> <style type="text/css"> #thediv{
-
JavaScript计算某一天是星期几的方法
本文实例讲述了JavaScript计算某一天是星期几的方法.分享给大家供大家参考.具体如下: JavaScript计算某一天是星期几,文本框中是默认值 ,只要按此种格式输入日期时间,就可以推算出当天是星期几,一个简单的JS时间计算实例,运行本效果后,只需点击"计算"按钮即可显示效果,这样我们就能很快的知道某一天是星期几了. 运行效果图如下: <html> <head> <title>计算某一天是星期几</title> <style
-
JavaScript 中调用 Kotlin 方法实例详解
JavaScript 中调用 Kotlin 方法实例详解 Kotlin 编译器生成正常的 JavaScript 类,可以在 JavaScript 代码中自由地使用的函数和属性 .不过,你应该记住一些微妙的事情. 用独立的 JavaScript 隔离声明 为了防止损坏全局对象,Kotlin 创建一个包含当前模块中所有 Kotlin 声明的对象 .所以如果你把模块命名为 myModule,那么所有的声明都可以通过 myModule 对象在 JavaScript 中可用.例如: fun foo() =
随机推荐
- AngularJS中的过滤器filter用法完全解析
- 经典黑客远程攻击过程概要
- 用php获取本周,上周,本月,上月,本季度日期的代码
- PHP实现删除多重数组对象属性并重新赋值的方法
- python append、extend与insert的区别
- 基于jsp的AJAX多文件上传的实例
- C++ 排序插入排序实例详解
- C#子线程执行完后通知主线程的方法
- 中国站长健康问题不容忽视 珍惜生命 珍惜站长
- Ubuntu LTS服务器部署Jenkins详细介绍
- PHPMAILER实现PHP发邮件功能
- 详细分析Java并发集合ArrayBlockingQueue的用法
- Shell编程之特殊变量和扩展变量详解
- python字符串替换第一个字符串的方法
- 实用自动化运维Python脚本分享
- 使用nginx设置代理服务器
- Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
- Angular 多级路由实现登录页面跳转(小白教程)
- Android Studio 下 Flutter 开发环境搭建,Flutter,Dart 插件安装,Flutter SDK 安装,环境变量配置,开发环境检查
- Python面向对象程序设计之私有变量,私有方法原理与用法分析