当前位置:首页 > 日记 > 正文

javascript计算渐变颜色的实例

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; } 

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

相关文章

js中string之正则表达式replace方

js中string之正则表达式replace方

方法,正则表达式,详解,电脑软件,js,replace方法是javascript涉及到正则表达式中较为复杂的一个方法,严格上说应该是string对象的方法。只不过牵扯到正则的时候比较多一些。需要我们灵活的使用。语法: strinbj.replace(regexp/substr,replacem…

Spring jdbc中数据库操作对象化模

Spring jdbc中数据库操作对象化模

数据库操作,模型,对象,详解,实例,Spring jdbc中数据库操作对象化模型的实例详解Spring Jdbc数据库操作对象化 使用面向对象方式表示关系数据库的操作,实现一个线程安全可复用的对象模型,其顶级父类接口RdbmsOperation. SqlOperation继承该接…

最通俗易懂的javascript变量提升详

最通俗易懂的javascript变量提升详

变量提升,易懂,通俗,详解,电脑软件,如下所示:a = 'ghostwu';var a;console.log( a );在我没有讲什么是变量提升,以及变量提升的规则之前, 或者你没有学习过变量提升,如果按照现有的javascript理解, 对于上述的例子,你可能会认为第3行代码的输出…

Dreamweaver如何向网页添加音乐

Dreamweaver如何向网页添加音乐

音乐,网页,电脑软件,Dreamweaver,当我们在做网页时,我们会添加你喜欢的音乐,并为你带来今天添加音乐的方式。 软件名称:Adobe Dreamweaver CC 20143264位中文破解安装版(附破解教程)软件大小:320mb更新时间:2014-06-25 1。首先,打开DW软件并构建…

用PHP解决约瑟夫环算法实例

用PHP解决约瑟夫环算法实例

算法,约瑟夫,实例,电脑软件,PHP,本文介绍了用PHP堆栈解决约瑟夫环问题的算法,供大家参考: 约瑟夫环问题:39个犹太人,约瑟夫斯和他的朋友们藏在山洞里,和39个犹太人决定死而不是被敌人抓住。我决定自杀,41人排成一圈,从第一个人开始数,报告数量的每…

Node.js使用orm2进行update操作时

Node.js使用orm2进行update操作时

修改,字段,操作,解决方法,电脑软件,前言最近在工作中遇到一个问题,在使用Orm2进行model修改时,发现当对关联字段进行update操作时,执行了2次SQL,第一次把值改为了我们期望的值,第二次又会把值改回成原来的值。经过调查,当autoFetch开启时,会自动取…

WPS文字中怎么制作联合发文文件头

WPS文字中怎么制作联合发文文件头

文件,文字,方法,发文,电脑软件,  WPS文字中怎么制作联合发文文件头?在WPS文字中,表格工具的作用不仅仅是用来制作表格的。活用表格,有时会收到意想不到的效果,完成一些特殊的任务。下面小编就教你WPS文字中制作联合发文文件头的方法。WPS文…

word页面设置为横向页面的方法

word页面设置为横向页面的方法

方法,横向,页面,设置为,电脑软件,word怎么设置为横向页面呢?在编辑word文档时,有时我们需要的横向长度不够长,这时候就需要把word的横向页面改为纵向页面,以下就是小编给大家分享的word页面设置为横向页面的方法。方法步骤如下:1.文件--页面设…

PHP使用PDO访问oracle数据库的步骤

PHP使用PDO访问oracle数据库的步骤

步骤,数据库,详解,电脑软件,PHP,前言PDO 从一开始就吸取了现有数据库扩展成功和失败的经验教训。因为 PDO 的代码是全新的,所以我们有机会重新开始设计性能,以利用 PHP 5 的最新特性。PDO 旨在将常见的数据库功能作为基础提供,同时提供对于 RD…

PHP基于回溯算法解决n皇后问题的方

PHP基于回溯算法解决n皇后问题的方

方法,回溯算法,示例,皇后,电脑软件,本文实例讲述了PHP基于回溯算法解决n皇后问题的方法。分享给大家供大家参考,具体如下:这里对于n皇后问题就不做太多的介绍,相关的介绍与算法分析可参考前面一篇C++基于回溯法解决八皇后问题。回溯法的基本做…

WPS演示2013如何对进行淡化处理

WPS演示2013如何对进行淡化处理

演示,图片,电脑软件,WPS,  有时候插入图片之后,觉得颜色太鲜艳了,想要淡化色彩,其实并不难。以下是小编为您带来的关于WPS演示2013对图片进行淡化处理,希望对您有所帮助。WPS演示2013对图片进行淡化处理①启动WPS演示,插入图片之后,在图片上插…

ps怎么设计一个网络感十足的社交行

ps怎么设计一个网络感十足的社交行

网络,行业,社交,电脑软件,ps,ps中想要给网页设计一个科技感的banner,该怎么设计呢?下面我们就来看看详细的教程。软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更新时间:2015-11-041、新建文件,创建画布2、添加一个科技感的…