javascript计算渐变颜色的实例


Posted in Javascript onSeptember 22, 2017

javascript计算渐变颜色的实例

有时候,一个表格或者一片区域内,需要若干同色系从浅到深的颜色,如图所示:  

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

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

Javascript 相关文章推荐
javascript call方法使用说明
Jan 11 Javascript
JQuery里选择超链接的实现代码
May 22 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
Feb 16 Javascript
禁用JavaScript控制台调试的方法
Mar 07 Javascript
Jquery 垂直多级手风琴菜单附源码下载
Nov 17 Javascript
JavaScript的函数式编程基础指南
Mar 19 Javascript
探寻JavaScript中this指针指向
Apr 23 Javascript
基于jQuery实现顶部导航栏功能
Dec 27 Javascript
Angular项目中$scope.$apply()方法的使用详解
Jul 26 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
vue.js input框之间赋值方法
Aug 24 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
Dec 09 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
Sep 22 #Javascript
原生JS实现日历组件的示例代码
Sep 22 #Javascript
BootstrapTable加载按钮功能实例代码详解
Sep 22 #Javascript
Bootstrap Table 删除和批量删除
Sep 22 #Javascript
jQury Ajax使用Token验证身份实例代码
Sep 22 #Javascript
Angular将填入表单的数据渲染到表格的方法
Sep 22 #Javascript
详解在express站点中使用ejs模板引擎
Sep 21 #Javascript
You might like
ThinkPHP3.1新特性之对分组支持的改进与完善概述
2014/06/19 PHP
codeigniter中view通过循环显示数组数据的方法
2015/03/20 PHP
thinkPHP基于ajax实现的菜单与分页示例
2016/07/12 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
PDO::lastInsertId讲解
2019/01/29 PHP
JTrackBar水平拖动效果
2007/07/15 Javascript
动态载入/删除/更新外部 JavaScript/Css 文件的代码
2010/07/03 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
2014/01/07 Javascript
浅谈jQuery中setInterval()方法
2015/07/07 Javascript
浅析Bootstrap缩略图组件与警示框组件
2016/04/29 Javascript
在IE8上JS实现combobox支持拼音检索功能
2016/05/23 Javascript
jQuery插件扩展测试实例
2016/06/21 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
2017/03/10 Javascript
基于Vue.js 2.0实现百度搜索框效果
2020/12/28 Javascript
在nginx上部署vue项目(history模式)的方法
2017/12/28 Javascript
浅谈Vue.use的使用
2018/08/29 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
2018/08/30 Javascript
vue实现跳转接口push 转场动画示例
2019/11/01 Javascript
python基础教程之udp端口扫描
2014/02/10 Python
python在windows命令行下输出彩色文字的方法
2015/03/19 Python
说一说Python logging
2016/04/15 Python
python2.7读取文件夹下所有文件名称及内容的方法
2018/02/24 Python
解决Pycharm下面出现No R interpreter defined的问题
2018/10/29 Python
Python3常用内置方法代码实例
2019/11/18 Python
Python 格式化输出_String Formatting_控制小数点位数的实例详解
2020/02/04 Python
英国最大的经认证的有机超市:Planet Organic
2018/02/02 全球购物
初中生学习生活的自我评价
2013/11/20 职场文书
参观考察邀请函范文
2014/01/29 职场文书
学校安全教育制度
2014/01/31 职场文书
大学生个人先进事迹材料范文
2014/05/03 职场文书
高校教师个人工作总结2014
2014/12/17 职场文书
六五普法学习心得体会
2016/01/21 职场文书
SQL Server中交叉联接的用法详解
2021/04/22 SQL Server
基于flask实现五子棋小游戏
2021/05/25 Python
Python Pandas 删除列操作
2022/03/16 Python