javascript計算漸變顏色的實例

更新時間：2017年09月22日 09:35:48 作者：lynnlysh

這篇文章主要介紹了javascript計算漸變顏色的實例的相關資料,希望通過本文能幫助到大家，讓大家理解掌握這部分內(nèi)容，需要的朋友可以參考下

javascript計算漸變顏色的實例

有時候，一個表格或者一片區(qū)域內(nèi)，需要若干同色系從淺到深的顏色，如圖所示：

如果需要的顏色少，則顏色的差異較大，需要的顏色多，則顏色差異小，如下圖：

這時，就用到了同色系漸變顏色的計算，算法如下：

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; 
}

如有疑問請留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

您可能感興趣的文章:

JS組件Bootstrap實現(xiàn)彈出框效果代碼
這篇文章主要介紹了JS組件Bootstrap實現(xiàn)彈出框效果代碼的相關資料，對彈出框感興趣的小伙伴們可以參考一下
2016-04-04
RxJS中四種Subject的用法和區(qū)別
RxJS中有四種不同類型的Subject，它們分別是Subject、BehaviorSubject、ReplaySubject和AsyncSubject，本文將介紹這四種Subject的用法、區(qū)別以及適用的應用場景，并提供代碼示例,需要的朋友可以參考下
2023-07-07
使用element-ui的upload組件上傳代碼包時遇到的問題小結
這篇文章主要介紹了使用element-ui的upload組件上傳代碼包時遇到的問題及總結,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-12-12
JS實現(xiàn)往下不斷流動網(wǎng)頁背景的方法
這篇文章主要介紹了JS實現(xiàn)往下不斷流動網(wǎng)頁背景的方法,實例分析了遞歸調(diào)用自定義函數(shù)scrollBG實現(xiàn)動態(tài)背景特效的功能,具有一定參考借鑒價值,需要的朋友可以參考下
2015-02-02
分享Bootstrap簡單表格、表單、登錄頁面
本文給大家分享Bootstrap簡單表格、表單、登錄頁面的實例代碼，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧
2017-08-08
微信小程序?qū)崿F(xiàn)文件預覽
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)文件預覽，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-10-10
基于javascript實現(xiàn)漂亮的頁面過渡動畫效果附源碼下載
本文通過javascript實現(xiàn)漂亮的頁面過濾動畫效果，用戶通過點擊頁面左側的菜單，對應的頁面加載時伴隨著滑動過濾動畫，并帶有進度條效果。用戶體驗度非常好，感興趣的朋友一起看看吧
2015-10-10
JS實現(xiàn)瀏覽器打印、打印預覽示例
本篇文章主要介紹了JS實現(xiàn)瀏覽器打印、打印預覽示例。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-02-02
JavaScript學習筆記(三)：JavaScript也有入口Main函數(shù)
大家都知道在c和java中，有main函數(shù)貨main方法作為一個程序的入口函數(shù)或方法。在JS中從js源文件的頭部開始運行的，我們?nèi)匀豢梢蕴摌嫵鲆粋€main函數(shù)來作為程序的起點，這樣一來不僅可以跟其他語言統(tǒng)一了，而且說不定你會對JS有更深的理解。感興趣的小伙跟著小編一起學習吧
2015-09-09
IE 當eval遇上function的處理
在IE下，當eval遇上function，IE下會出現(xiàn)怪異情況，我們用例子一步步說明
2011-08-08