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两段代码,两个小技巧
Feb 04 Javascript
jQuery实现的立体文字渐变效果
May 17 Javascript
javascript hasFocus使用实例
Jun 29 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
Dec 19 Javascript
javascript正则表达式使用replace()替换手机号的方法
Jan 19 Javascript
在JavaScript中处理时间之getHours()方法的使用
Jun 10 Javascript
js改变html的原有内容实现方法
Oct 05 Javascript
使用AngularJS2中的指令实现按钮的切换效果
Mar 27 Javascript
Bootstrap响应式表格详解
May 23 Javascript
页面内锚点定位及跳转方法总结(推荐)
Apr 24 Javascript
微信小程序云开发之使用云存储
May 17 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
Dec 10 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
风格模板初级不完全修改教程
2006/10/09 PHP
php并发对MYSQL造成压力的解决方法
2013/02/21 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
Javascript valueOf 使用方法
2008/12/28 Javascript
Prototype Date对象 学习
2009/07/12 Javascript
Js 随机数产生6位数字
2010/05/13 Javascript
Google 静态地图API实现代码
2010/11/19 Javascript
JavaScript函数获取事件源的小例子
2014/05/14 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
2014/10/16 Javascript
bootstrap下拉菜单使用方法解析
2017/01/13 Javascript
Vue监听数据对象变化源码
2017/03/09 Javascript
js微信应用场景之微信音乐相册案例分享
2017/08/11 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
2017/08/25 Javascript
JS设计模式之单例模式(一)
2017/09/29 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
2018/08/31 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
2018/11/15 Javascript
Python输出带颜色的字符串实例
2017/10/10 Python
python2.7读取文件夹下所有文件名称及内容的方法
2018/02/24 Python
Python 查找字符在字符串中的位置实例
2018/05/02 Python
linux下python使用sendmail发送邮件
2018/05/22 Python
记录Python脚本的运行日志的方法
2019/06/05 Python
Python制作微信好友背景墙教程(附完整代码)
2019/07/17 Python
Python多线程模块Threading用法示例小结
2019/11/09 Python
使用python 计算百分位数实现数据分箱代码
2020/03/03 Python
pyspark给dataframe增加新的一列的实现示例
2020/04/24 Python
Under Armour西班牙官网:美国知名的高端功能性运动品牌
2018/12/12 全球购物
美国新娘礼品店:The Paisley Box
2020/09/08 全球购物
二手房购房意向书范本
2014/04/01 职场文书
洗手间标语
2014/06/23 职场文书
建筑结构施工求职信
2014/07/11 职场文书
个人工作决心书
2015/09/22 职场文书
升学宴家长答谢词
2015/09/29 职场文书
先进教师个人主要事迹材料
2015/11/03 职场文书
tensorflow学习笔记之tfrecord文件的生成与读取
2021/03/31 Python
Mysql 数据库中的 redo log 和 binlog 写入策略
2022/04/26 MySQL
vue router 动态路由清除方式
2022/05/25 Vue.js