javascript计算渐变颜色的实例
更新时间：2017年09月22日 09:35:48 作者：lynnlysh
这篇文章主要介绍了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;
}
如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
相关文章
这篇文章主要介绍了JS组件Bootstrap实现弹出框效果代码的相关资料，对弹出框感兴趣的小伙伴们可以参考一下2016-04-04
RxJS中有四种不同类型的Subject，它们分别是Subject、BehaviorSubject、ReplaySubject和AsyncSubject，本文将介绍这四种Subject的用法、区别以及适用的应用场景，并提供代码示例,需要的朋友可以参考下2023-07-07
使用element-ui的upload组件上传代码包时遇到的问题小结
这篇文章主要介绍了使用element-ui的upload组件上传代码包时遇到的问题及总结,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-12-12
这篇文章主要介绍了JS实现往下不断流动网页背景的方法,实例分析了递归调用自定义函数scrollBG实现动态背景特效的功能,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
本文给大家分享Bootstrap简单表格、表单、登录页面的实例代码，非常不错，具有参考借鉴价值，需要的的朋友参考下吧2017-08-08
这篇文章主要为大家详细介绍了微信小程序实现文件预览，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
基于javascript实现漂亮的页面过渡动画效果附源码下载
本文通过javascript实现漂亮的页面过滤动画效果，用户通过点击页面左侧的菜单，对应的页面加载时伴随着滑动过滤动画，并带有进度条效果。用户体验度非常好，感兴趣的朋友一起看看吧2015-10-10
本篇文章主要介绍了JS实现浏览器打印、打印预览示例。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
JavaScript学习笔记(三)：JavaScript也有入口Main函数
大家都知道在c和java中，有main函数货main方法作为一个程序的入口函数或方法。在JS中从js源文件的头部开始运行的，我们仍然可以虚构出一个main函数来作为程序的起点，这样一来不仅可以跟其他语言统一了，而且说不定你会对JS有更深的理解。感兴趣的小伙跟着小编一起学习吧2015-09-09
在IE下，当eval遇上function，IE下会出现怪异情况，我们用例子一步步说明2011-08-08
最新评论