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 EasyUI API 中文文档 - Tabs标签页/选项卡
Oct 01 Javascript
深入了解javascript中的prototype与继承
Apr 14 Javascript
JS画5角星方法介绍
Sep 17 Javascript
js使用数组判断提交数据是否存在相同数据
Nov 27 Javascript
JavaScript调试工具汇总
Dec 23 Javascript
jquery仿QQ登录账号选择下拉框效果
Mar 22 Javascript
基于JavaScript实现前端文件的断点续传
Oct 17 Javascript
JS冒泡事件与事件捕获实例详解
Nov 25 Javascript
为你的微信小程序体积瘦身详解
May 20 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
Nov 28 Javascript
纯js封装的ajax功能函数与用法示例
May 14 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
May 21 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
现磨咖啡骗局!现磨咖啡=新鲜咖啡?现磨咖啡背后的猫腻你不懂!
2019/03/28 冲泡冲煮
发布一个迷你php+AJAX聊天程序[聊天室]提供下载
2007/07/21 PHP
thinkphp5使用无限极分类
2019/02/18 PHP
一个对于js this关键字的问题
2007/01/09 Javascript
Add Formatted Text to a Word Document
2007/06/15 Javascript
JQuery仿小米手机抢购页面倒计时效果
2014/12/16 Javascript
jQuery中:eq()选择器用法实例
2014/12/29 Javascript
Javascript基础教程之数据类型转换
2015/01/18 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
2016/08/01 Javascript
js遍历获取表格内数据的方法(必看)
2017/04/06 Javascript
Node实战之不同环境下配置文件使用教程
2018/01/02 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
2018/12/03 Javascript
微信小程序分包加载代码实现方法详解
2019/09/23 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
2019/09/23 Javascript
react-router-dom 嵌套路由的实现
2020/05/02 Javascript
vue-cli脚手架的.babelrc文件用法说明
2020/09/11 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
2020/10/24 Javascript
js实现限定范围拖拽的示例
2020/10/26 Javascript
[04:59]DOTA2-DPC中国联赛 正赛 Ehome vs iG 选手采访
2021/03/11 DOTA
Python ORM框架SQLAlchemy学习笔记之关系映射实例
2014/06/10 Python
在python3.5中使用OpenCV的实例讲解
2018/04/02 Python
pytorch 可视化feature map的示例代码
2019/08/20 Python
Python爬虫:url中带字典列表参数的编码转换方法
2019/08/21 Python
python生成大写32位uuid代码
2020/03/03 Python
Python爬虫实例——爬取美团美食数据
2020/07/15 Python
python中time.ctime()实例用法
2021/02/03 Python
欧舒丹俄罗斯官方网站:L’OCCITANE俄罗斯
2019/11/22 全球购物
总经理秘书工作职责
2013/12/26 职场文书
骨干教师培训制度
2014/01/13 职场文书
各营销点岗位职责范本
2014/03/05 职场文书
辩论赛主持词
2014/03/18 职场文书
党校培训自我鉴定范文
2014/03/20 职场文书
2016党员干部反腐倡廉心得体会
2016/01/13 职场文书
python基于scrapy爬取京东笔记本电脑数据并进行简单处理和分析
2021/04/14 Python
SQL Server #{}可以防止SQL注入
2022/05/11 SQL Server
HTML中实现音乐或视频自动播放案例详解
2022/05/30 HTML / CSS