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绑定原理 简单解析与实现代码分享
Sep 06 Javascript
各种页面定时跳转(倒计时跳转)代码总结
Oct 24 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
Jun 16 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
Jan 26 Javascript
微信小程序 自己制作小组件实例详解
Dec 22 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
Jan 19 Javascript
Vue.js如何优雅的进行form validation
Apr 07 Javascript
Nuxt配合Node在实际生产中的应用详解
Aug 07 Javascript
使用layui定义一个模块并使用的例子
Sep 14 Javascript
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
react如何快速设置文件路径别名
Apr 28 Javascript
JavaScript流程控制(循环)
Dec 06 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
解析左右值无限分类的实现算法
2013/06/20 PHP
php常用数学函数汇总
2014/11/21 PHP
php输出全球各个时区列表的方法
2015/03/31 PHP
清华大学出版的事半功倍系列 javascript全部源代码
2007/05/04 Javascript
javascript获得网页窗口实际大小的示例代码
2013/09/21 Javascript
jquery 操作iframe的几种方法总结
2013/12/13 Javascript
浅析jquery的js图表组件highcharts
2014/03/06 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
2014/04/16 Javascript
jquery操作checked属性以及disabled属性的多种方法
2014/06/20 Javascript
jQuery找出网页上最高元素的方法
2015/03/20 Javascript
jQuery蓝色风格滑动导航栏代码分享
2015/08/19 Javascript
javascript中return,return true,return false三者的用法及区别
2015/11/17 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
2016/12/14 Javascript
vue的Virtual Dom实现snabbdom解密
2017/05/03 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
2017/09/14 Javascript
jfinal与bootstrap的登出实战详解
2017/11/27 Javascript
vue中echarts3.0自适应的方法
2018/02/26 Javascript
原生JS实现图片懒加载之页面性能优化
2019/04/26 Javascript
es6函数之尾调用优化实例分析
2020/04/25 Javascript
[48:29]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS KG
2018/03/31 DOTA
[01:10:03]OG vs EG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
python将多个文本文件合并为一个文本的代码(便于搜索)
2011/03/13 Python
Python打印输出数组中全部元素
2018/03/13 Python
利用Python将每日一句定时推送至微信的实现方法
2018/08/13 Python
Python面向对象之类的封装操作示例
2019/06/08 Python
python爬虫项目设置一个中断重连的程序的实现
2019/07/26 Python
pycharm修改文件的默认打开方式的步骤
2019/07/29 Python
Python实现性能自动化测试竟然如此简单
2019/07/30 Python
Selenium使用Chrome模拟手机浏览器方法解析
2020/04/10 Python
时尚的CSS3进度条效果
2012/02/22 HTML / CSS
Html5 Geolocation获取地理位置信息实例
2016/12/09 HTML / CSS
美国帽子俱乐部商店:Hat Club
2019/07/05 全球购物
银行实习自我鉴定
2013/10/12 职场文书
消防安全责任书
2014/04/14 职场文书
2014年售票员工作总结
2014/11/19 职场文书
SQL Server2019数据库备份与还原脚本,数据库可批量备份
2021/11/20 SQL Server