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 相关文章推荐
使用IE的地址栏来辅助调试Web页脚本
Mar 08 Javascript
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
Mar 16 Javascript
node.js使用nodemailer发送邮件实例
Mar 10 Javascript
jQuery使用$.ajax进行即时验证的方法
Dec 08 Javascript
学习JavaScript设计模式之状态模式
Jan 08 Javascript
BootStrap tooltip提示框使用小结
Oct 26 Javascript
jquery uploadify如何取消已上传成功文件
Feb 08 Javascript
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
Oct 24 Javascript
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
js验证身份证号码记录的方法
Apr 26 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
vue自定义指令和动态路由实现权限控制
Aug 28 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
十大感人催泪爱情动漫 第一名至今不忍在看第二遍
2020/03/04 日漫
Zend的AutoLoad机制介绍
2012/09/27 PHP
WampServer下安装多个版本的PHP、mysql、apache图文教程
2015/01/07 PHP
php递归删除目录与文件的方法
2015/01/30 PHP
laravel5.2实现区分前后台用户登录的方法
2017/01/11 PHP
[原创]PHPCMS遭遇会员投稿审核无效的解决方法
2017/01/11 PHP
PDO::prepare讲解
2019/01/29 PHP
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
2014/01/07 Javascript
javascript 寻找错误方法整理
2014/06/15 Javascript
JQuery遍历json数组的3种方法
2014/11/08 Javascript
kindeditor修复会替换script内容的问题
2015/04/03 Javascript
jQuery如何获取动态添加的元素
2016/06/24 Javascript
jQuery实现jQuery-form.js实现异步上传文件
2017/04/28 jQuery
实例讲解DataTables固定表格宽度(设置横向滚动条)
2017/07/11 Javascript
Vue仿今日头条实例详解
2018/02/06 Javascript
100行代码实现一个vue分页组功能
2018/11/06 Javascript
vue弹出框组件封装实例代码
2019/10/31 Javascript
python进阶教程之文本文件的读取和写入
2014/08/29 Python
Python爬虫获取整个站点中的所有外部链接代码示例
2017/12/26 Python
利用Python写一个爬妹子的爬虫
2018/06/08 Python
完美解决Python matplotlib绘图时汉字显示不正常的问题
2019/01/29 Python
利用Pandas和Numpy按时间戳将数据以Groupby方式分组
2019/07/22 Python
基于plt.title无法显示中文的快速解决
2020/05/16 Python
Java ExcutorService优雅关闭方式解析
2020/05/30 Python
Selenium结合BeautifulSoup4编写简单的python爬虫
2020/11/06 Python
HTML5新增元素如何兼容旧浏览器有哪些方法
2014/05/09 HTML / CSS
Spartoo比利时:欧洲时尚购物网站
2017/12/06 全球购物
如何写一个Java类既可以用作applet也可以用作java应用
2016/01/18 面试题
会计系毕业个人自荐信格式
2013/09/23 职场文书
法学专业毕业生求职信
2014/06/12 职场文书
学习优秀党务工作者先进事迹材料思想报告
2014/09/17 职场文书
司法局群众路线教育实践活动开展情况总结
2014/10/25 职场文书
航班延误投诉信
2015/07/02 职场文书
五一放假通知怎么写
2015/08/18 职场文书
Python接口自动化之文件上传/下载接口详解
2022/04/05 Python
muduo TcpServer模块源码分析
2022/04/26 Redis