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 相关文章推荐
setTimeout的延时为0时多个浏览器的区别
May 23 Javascript
javascript中的parseInt和parseFloat区别
Jul 12 Javascript
js实现刷新iframe的方法汇总
Apr 27 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
Aug 05 Javascript
AngularJS中的过滤器filter用法完全解析
Apr 22 Javascript
Vue.js动态组件解析
Sep 09 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
Nov 27 Javascript
自定义vue全局组件use使用、vuex的使用详解
Jun 14 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
Aug 23 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
Sep 07 Javascript
js实现淘宝浏览商品放大镜功能
Oct 28 Javascript
vue-video-player 断点续播的实现
Feb 01 Vue.js
利用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
中国广播史趣谈 — 几个历史第一次
2021/03/01 无线电
Laravel中日期时间处理包Carbon的简单使用
2017/09/21 PHP
php桥接模式应用案例分析
2019/10/23 PHP
JavaScript 解析Json字符串的性能比较分析代码
2009/12/16 Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
2013/05/19 Javascript
用原生js做个简单的滑动效果的回到顶部
2014/10/15 Javascript
JavaScript字符串删除重复字符的方法
2015/12/25 Javascript
详解javascript实现自定义事件
2016/01/19 Javascript
利用forever和pm2部署node.js项目过程
2017/05/10 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
2017/06/28 jQuery
nodejs 搭建简易服务器的图文教程(推荐)
2017/07/18 NodeJs
基于复选框demo(分享)
2017/09/27 Javascript
Express系列之multer上传的使用
2017/10/27 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
2019/02/22 Javascript
关于NodeJS中的循环引用详解
2019/07/23 NodeJs
非常漂亮的js烟花效果
2020/03/10 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
2020/04/09 Javascript
Vue Render函数创建DOM节点代码实例
2020/07/08 Javascript
Openlayers显示地理位置坐标的方法
2020/09/28 Javascript
[01:33]PWL开团时刻DAY2-开雾与反开雾
2020/10/31 DOTA
python 获取页面表格数据存放到csv中的方法
2018/12/26 Python
吉尔德利巧克力公司:Ghirardelli Chocolate Company
2019/03/27 全球购物
铭立家具面试题
2012/12/06 面试题
怎样有效的进行自我评价
2013/10/06 职场文书
市场营销个人求职信范文
2014/02/02 职场文书
父亲的菜园教学反思
2014/02/13 职场文书
小学毕业寄语大全
2014/04/03 职场文书
四年级学生评语大全
2014/04/21 职场文书
乡镇三严三实学习心得体会
2014/10/13 职场文书
颐和园英文导游词
2015/01/30 职场文书
2015新生加入学生会自荐书
2015/03/24 职场文书
通知函的格式
2015/04/27 职场文书
Python语言规范之Pylint的详细用法
2021/06/24 Python
spring cloud eureka 服务启动失败的原因分析及解决方法
2022/03/17 Java/Android
vue3使用vuedraggable实现拖拽功能
2022/04/06 Vue.js
Apache POI操作批量导入MySQL数据库
2022/06/21 Servers