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 switch case 另类写法
Mar 14 Javascript
javascript通过className来获取元素的简单示例代码
Jan 10 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
Jul 02 Javascript
jquery+easeing实现仿flash的载入动画
Mar 10 Javascript
js贪吃蛇游戏实现思路和源码
Apr 14 Javascript
JavaScript代码实现图片循环滚动效果
Mar 19 Javascript
利用原生JS自动生成文章标题树的实例
Aug 22 Javascript
ES6新特性之函数的扩展实例详解
Apr 01 Javascript
微信小程序实现文字跑马灯效果
May 26 Javascript
新手入门带你学习JavaScript引擎运行原理
Jun 24 Javascript
Vue3 中的数据侦测的实现
Oct 09 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
Dec 24 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
用mysql触发器自动更新memcache的实现代码
2009/10/11 PHP
基于HTTP长连接的"服务器推"技术的php 简易聊天室
2009/10/31 PHP
jQuery 全选效果实现代码
2009/03/23 Javascript
Javascript 定时器调用传递参数的方法
2009/11/12 Javascript
editable.js 基于jquery的表格的编辑插件
2011/10/24 Javascript
extjs render 用法介绍
2013/09/11 Javascript
JS控制日期显示的小例子
2013/11/23 Javascript
jquery通过a标签删除table中的一行的代码
2013/12/02 Javascript
JavaScript保留两位小数的2个自定义函数
2014/05/05 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
2014/10/22 Javascript
require.js的用法详解
2015/10/20 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
2016/05/16 Javascript
Node.js 数据加密传输浅析
2016/11/16 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
2017/07/27 Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
2017/08/04 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
2017/12/07 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
2018/03/15 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
2018/09/26 Javascript
如何用原生js写一个弹窗消息提醒插件
2019/05/24 Javascript
layui实现数据表格点击搜索功能
2020/03/26 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
2019/11/09 Javascript
原生js实现日历效果
2020/03/02 Javascript
举例讲解Linux系统下Python调用系统Shell的方法
2015/11/07 Python
wxPython实现窗口用图片做背景
2018/04/25 Python
centos6.8安装python3.7无法import _ssl的解决方法
2018/09/17 Python
python挖矿算力测试程序详解
2019/07/03 Python
python 抓取知乎指定回答下视频的方法
2020/07/09 Python
洛杉矶健身中心女性专用运动服饰品牌:Marika
2018/05/09 全球购物
幼教毕业生自我鉴定
2014/01/12 职场文书
《影子》教学反思
2014/02/21 职场文书
党员群众路线教育实践活动剖析材料
2014/10/10 职场文书
学生检讨书范文
2015/01/27 职场文书
2015年小学重阳节活动总结
2015/07/29 职场文书
小学2016年“我们的节日·重阳节”活动总结
2016/04/01 职场文书
如何用python识别滑块验证码中的缺口
2021/04/01 Python
Python中super().__init__()测试以及理解
2021/12/06 Python