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 相关文章推荐
jquery构造器的实现代码小结
May 16 Javascript
javascript静态页面传值的三种方法分享
Nov 12 Javascript
jQuery插件分享之分页插件jqPagination
Jun 06 Javascript
关于Javascript加载执行优化的研究报告
Dec 16 Javascript
原生JavaScript编写俄罗斯方块
Mar 30 Javascript
详解JavaScript的流程控制语句
Nov 30 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
Oct 12 Javascript
Node.js 使用命令行工具检查更新
Jun 08 Javascript
vue项目动态设置页面title及是否缓存页面的问题
Nov 08 Javascript
微信小程序云开发 搭建一个管理小程序
May 17 Javascript
原生JS与CSS实现软件卸载对话框功能
Dec 05 Javascript
在Vue 中实现循环渲染多个相同echarts图表
Jul 20 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
PHP中动态HTML的输出技术
2006/10/09 PHP
基于mysql的bbs设计(四)
2006/10/09 PHP
Yii框架中memcache用法实例
2014/12/03 PHP
利用PHP判断文件是否为图片的方法总结
2017/01/06 PHP
Javascript 学习笔记 错误处理
2009/07/30 Javascript
jquery修改网页背景颜色通过css方法实现
2014/06/06 Javascript
javascript实现单击和双击并存的方法
2014/12/13 Javascript
Javascript中String的常用方法实例分析
2015/06/13 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
2016/03/13 Javascript
jquery滚动条插件(可以自定义)
2016/12/11 Javascript
JavaScript实现的搜索及高亮显示功能示例
2017/08/14 Javascript
详解为Bootstrap Modal添加拖拽的方法
2018/01/05 Javascript
Nodejs 发布自己的npm包并制作成命令行工具的实例讲解
2018/05/15 NodeJs
JS滚轮控制图片缩放大小和拖动的实例代码
2018/11/20 Javascript
jquery中attr、prop、data区别与用法分析
2019/09/25 jQuery
VUE动态生成word的实现
2020/07/26 Javascript
Python struct.unpack
2008/09/06 Python
Python查看多台服务器进程的脚本分享
2014/06/11 Python
Python内置函数的用法实例教程
2014/09/08 Python
详解Django框架中用户的登录和退出的实现
2015/07/23 Python
python之cv2与图像的载入、显示和保存实例
2018/12/05 Python
浅析HTML5页面元素及属性
2021/01/20 HTML / CSS
Nisbets法国:英国最大的厨房和餐饮设备供应商
2019/03/18 全球购物
毕业学生推荐信
2013/12/01 职场文书
销售总监岗位职责
2014/01/04 职场文书
房地产融资计划书
2014/01/10 职场文书
空中乘务员岗位职责
2014/03/08 职场文书
2014年党员公开承诺践诺书
2014/03/25 职场文书
优秀少先队工作者事迹材料
2014/05/13 职场文书
招商引资工作汇报
2014/10/28 职场文书
医生辞职信范文
2015/03/02 职场文书
投标单位介绍信
2015/05/05 职场文书
农村结婚典礼主持词
2015/06/29 职场文书
2019教师的学习计划
2019/06/25 职场文书
500字作文之周记
2019/12/13 职场文书
java高级用法JNA强大的Memory和Pointer
2022/04/19 Java/Android