javascript計(jì)算漸變顏色的實(shí)例

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

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

javascript計(jì)算漸變顏色的實(shí)例

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

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

這時(shí)，就用到了同色系漸變顏色的計(jì)算，算法如下：

function getItemColors (colorLevel) { 
  var colors= []; 
  //默認(rèn)的最深顏色 
  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; 
}

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

您可能感興趣的文章:

相關(guān)文章

JS獲取時(shí)間的方法
這篇文章主要介紹了JS獲取時(shí)間的方法,涉及date的相關(guān)使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-01-01
Jquery+javascript實(shí)現(xiàn)支付網(wǎng)頁(yè)數(shù)字鍵盤
這篇文章主要為大家詳細(xì)介紹了Jquery+javascript實(shí)現(xiàn)支付網(wǎng)頁(yè)數(shù)字鍵盤，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-12-12
JS正則表達(dá)式獲取分組內(nèi)容的方法詳解
這篇文章主要介紹了JS正則表達(dá)式獲取分組內(nèi)容的方法，有需要的朋友可以參考一下
2013-11-11
uniapp中如何修改圖標(biāo)和名稱
這篇文章主要給大家介紹了關(guān)于uniapp中如何修改圖標(biāo)和名稱的相關(guān)資料,uni-app是一個(gè)使用Vue.js開(kāi)發(fā)跨平臺(tái)應(yīng)用的前端框架,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下
2023-08-08
webpack前端應(yīng)用之基礎(chǔ)打包實(shí)現(xiàn)
本文主要介紹了webpack前端應(yīng)用之基礎(chǔ)打包實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-02-02
JavaScript中閉包之淺析解讀(必看篇)
下面小編就為大家?guī)?lái)一篇JavaScript中閉包之淺析解讀(必看篇)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-08-08
JavaScript登錄記住密碼操作(超簡(jiǎn)單代碼)
本文給大家分享一段簡(jiǎn)單的js代碼實(shí)現(xiàn)用戶登錄記住密碼操作，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
2017-03-03
JavaScript中alert的使用方法超詳細(xì)介紹
JS中的alert作用是在瀏覽器中彈出一個(gè)警告框,而使用alert有三種方式,不同的方式所呈現(xiàn)的效果也不相同,這篇文章主要給大家介紹了關(guān)于JavaScript中alert使用方法的相關(guān)資料,需要的朋友可以參考下
2024-01-01
echarts中tooltip添加點(diǎn)擊事件代碼示例
這篇文章主要給大家介紹了關(guān)于echarts中tooltip添加點(diǎn)擊事件的相關(guān)資料,echarts tooltip點(diǎn)擊事件是指當(dāng)用戶點(diǎn)擊圖表中的提示框(tooltip)時(shí)觸發(fā)的事件,需要的朋友可以參考下
2023-07-07
JavaScript使用Broadcast?Channel實(shí)現(xiàn)前端跨標(biāo)簽頁(yè)通信
這篇文章主要為大家詳細(xì)介紹了JavaScript如何使用Broadcast?Channel實(shí)現(xiàn)前端跨標(biāo)簽頁(yè)通信,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-04-04