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 相关文章推荐
关于使用runtimeStyle属性问题讨论文章
Mar 08 Javascript
js中eval()函数和trim()去掉字符串左右空格应用
Feb 02 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
May 27 Javascript
javascript原型模式用法实例详解
Jun 04 Javascript
jQuery实现高亮显示网页关键词的方法
Aug 07 Javascript
jQuery内容筛选选择器实例代码
Feb 06 Javascript
基于bootstrap写的一点localStorage本地储存
Nov 21 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
Dec 06 Javascript
vue实现一个炫酷的日历组件
Oct 08 Javascript
vue的keep-alive中使用EventBus的方法
Apr 23 Javascript
JavaScript find()方法及返回数据实例
Apr 30 Javascript
vue实现下拉菜单树
Oct 22 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中获取指定IP的物理地址的代码(正则表达式)
2011/06/23 PHP
php针对cookie操作的队列操作类实例
2014/12/10 PHP
php的sso单点登录实现方法
2015/01/08 PHP
PHP获取ip对应地区和使用网络类型的方法
2015/03/11 PHP
Yii2简单实现给表单添加验证码的方法
2016/07/18 PHP
php获取ip及网址的简单方法(必看)
2017/04/01 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
js获取当前select 元素值的代码
2010/04/19 Javascript
js限制文本框只能输入数字(正则表达式)
2012/07/15 Javascript
jquery实现图片灯箱明暗的遮罩效果
2013/11/15 Javascript
JavaScript避免代码的重复执行经验技巧分享
2014/04/17 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
2016/01/01 Javascript
JS中的forEach、$.each、map方法推荐
2016/04/05 Javascript
javascript和jquery实现用户登录验证
2016/05/04 Javascript
JS实现图片上传预览功能
2016/11/21 Javascript
webpack配置导致字体图标无法显示的解决方法
2018/03/06 Javascript
node 使用 async 控制并发的方法
2018/05/07 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
2018/09/28 Javascript
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
vue实现滑动到底部加载更多效果
2020/10/27 Javascript
javascript 原型与原型链的理解及应用实例分析
2020/02/10 Javascript
vue项目中使用多选框的实例代码
2020/07/22 Javascript
使用jQuery实现购物车
2020/10/29 jQuery
Python  __getattr__与__setattr__使用方法
2008/09/06 Python
Python兔子毒药问题实例分析
2015/03/05 Python
python实现生命游戏的示例代码(Game of Life)
2018/01/24 Python
Python动态声明变量赋值代码实例
2019/12/30 Python
英国户外装备和冒险服装零售商:alloutdoor
2018/01/30 全球购物
美国最大的无人机经销商:DroneNerds
2018/03/20 全球购物
美国传奇滑手Paul Rodriguez创办的街头滑板品牌:Primitive Skateboarding
2019/10/29 全球购物
企业安全生产责任书
2014/04/14 职场文书
工作所在部门证明
2014/09/21 职场文书
2014年审计工作总结
2014/11/17 职场文书
2014年流动人口工作总结
2014/11/26 职场文书
教师考核鉴定意见
2015/06/05 职场文书
vue cli4中mockjs在dev环境和build环境的配置详情
2022/04/06 Vue.js