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中文入门指南,翻译加实例,jQuery的起点教程
Jan 13 Javascript
jquery 获取json数据实现代码
Apr 27 Javascript
javascript重写alert方法的实例代码
Mar 29 Javascript
node.js中的fs.lstatSync方法使用说明
Dec 16 Javascript
使用jQuery监听DOM元素大小变化
Feb 24 Javascript
使用 stylelint检查CSS_StyleLint
Apr 28 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
Dec 05 Javascript
Vue脚手架的简单使用实例
Jul 10 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
Jan 02 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
Aug 07 Javascript
VUE+Element实现增删改查的示例源码
Nov 23 Vue.js
vue引入Excel表格插件的方法
Apr 28 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
fetchAll()与mysql_fetch_array()的区别详解
2013/06/05 PHP
php根据日期或时间戳获取星座信息和生肖等信息
2015/10/20 PHP
windows环境下使用Composer安装ThinkPHP5
2018/05/18 PHP
Laravel 之url参数,获取路由参数的例子
2019/10/21 PHP
js实现将选中值累加到文本框的方法
2015/08/12 Javascript
jquery动感漂浮导航菜单代码分享
2020/04/15 Javascript
Bootstrap企业网站实战项目4
2016/10/14 Javascript
Jquery-data的三种用法
2017/04/18 jQuery
React-intl 实现多语言的示例代码
2017/11/03 Javascript
微信小程序中实现手指缩放图片的示例代码
2018/03/13 Javascript
Vue.js更改调试地址端口号的实例
2018/09/19 Javascript
微信小程序引入Vant组件库过程解析
2019/08/06 Javascript
微信小程序前端promise封装代码实例
2019/08/24 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
2019/09/03 Javascript
[01:01]青春无憾,一战成名——DOTA2全国高校联赛开启
2018/02/25 DOTA
python制作一个桌面便签软件
2015/08/09 Python
基于python脚本实现软件的注册功能(机器码+注册码机制)
2016/10/09 Python
非递归的输出1-N的全排列实例(推荐)
2017/04/11 Python
利用python实现xml与数据库读取转换的方法
2017/06/17 Python
Python绘制3d螺旋曲线图实例代码
2017/12/20 Python
python jieba分词并统计词频后输出结果到Excel和txt文档方法
2018/02/11 Python
python中退出多层循环的方法
2018/11/27 Python
python接口自动化(十七)--Json 数据处理---一次爬坑记(详解)
2019/04/18 Python
python之pyqt5通过按钮改变Label的背景颜色方法
2019/06/13 Python
Python数据可视化:幂律分布实例详解
2019/12/07 Python
基于python实现地址和经纬度转换
2020/05/19 Python
美国在线医疗分销商:MedEx Supply
2020/02/04 全球购物
如何开发一个JQuery插件
2016/07/28 面试题
学校卫生检查制度
2014/02/03 职场文书
上海世博会志愿者口号
2014/06/17 职场文书
电子商务专业毕业生自荐书
2014/06/22 职场文书
典型事迹材料范文
2014/12/29 职场文书
酒店员工辞职信范文
2015/02/28 职场文书
合作意向书范本
2019/04/17 职场文书
vue实现列表拖拽排序的示例代码
2022/04/08 Vue.js
Linux中一对多配置日志服务器的详细步骤
2022/07/23 Servers