用javascript獲取任意顏色的更亮或更暗顏色值示例代碼
更新時(shí)間：2017年07月21日 10:08:32 作者：CHRIS COYIER
最近在工作中遇到的一個(gè)需求，發(fā)現(xiàn)網(wǎng)上沒有相對應(yīng)的解決方法，索性自己寫一個(gè)，所以這篇文章主要給大家介紹了關(guān)于利用javascript獲取任意顏色更亮或更暗顏色值的相關(guān)資料，文中給出了詳細(xì)的示例代碼，需要的朋友可以參考借鑒，下面來一起看看吧。
前言
本文主要給大家介紹的是關(guān)于利用javascript獲取任意顏色更亮或更暗顏色值的相關(guān)內(nèi)容，下面話不多說，來一起看看詳細(xì)的介紹：
預(yù)處理CSS，比如Sass和less可以通過設(shè)定一個(gè)特定值，讓任何顏色變得更亮或者更暗。但是在javascript中卻沒有這種方法。下面這個(gè)方法能在javascript中得到一個(gè)更亮或者更暗的值，通過一個(gè)給定的十六進(jìn)制顏色值（比如#F06D06,或者沒有#）
示例代碼
function LightenDarkenColor(col, amt) {
var usePound = false;
if (col[0] == "#") {
col = col.slice(1);
usePound = true;
}
var num = parseInt(col,16);
var r = (num >> 16) + amt;
if (r > 255) r = 255;
else if (r < 0) r = 0;
var b = ((num >> 8) & 0x00FF) + amt;
if (b > 255) b = 255;
else if (b < 0) b = 0;
var g = (num & 0x0000FF) + amt;
if (g > 255) g = 255;
else if (g < 0) g = 0;
return (usePound?"#":"") + (g | (b << 8) | (r << 16)).toString(16);
}
// Lighten
var NewColor = LightenDarkenColor("#F06D06", 20);
// Darken
var NewColor = LightenDarkenColor("#F06D06", -20);
總結(jié)
以上就是這篇文章的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
您可能感興趣的文章:
相關(guān)文章
JavaScript實(shí)現(xiàn)文字跟隨鼠標(biāo)特效
這篇文章主要介紹了JavaScript如何實(shí)現(xiàn)文字跟隨鼠標(biāo)特效,d代碼簡單易操作，感興趣的朋友可以參考下2015-08-08
這篇文章主要介紹了JavaScript日期類型的一些用法介紹,本文講解了獲取某個(gè)月份的天數(shù)、獲取時(shí)區(qū)、計(jì)算運(yùn)行時(shí)間、刪除cookie等用法,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了11種ASP連接數(shù)據(jù)庫的方法，需要的朋友可以參考下2015-09-09
這篇文章主要給大家介紹了關(guān)于如何利用原生JS實(shí)現(xiàn)data方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用原生JS具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
js 去掉空格實(shí)例 Trim() LTrim() RTrim()
js 去掉空格實(shí)例Trim(),LTrim(),RTrim() 需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
JavaScript可以說是最讓人初學(xué)者難以理解的單一屬性。我看了一些資料后，開始明白其實(shí)這些困難很大程度來自prototype這個(gè)名字本身的二義性2012-02-02
讓div層隨鼠標(biāo)移動的實(shí)現(xiàn)代碼 ie ff
隨鼠標(biāo)移動的div層使用ie ff ，大家可以注意下兼容性的問題。2009-12-12
ajaxfileupload.js實(shí)現(xiàn)上傳文件功能
這篇文章主要為大家詳細(xì)介紹了ajaxfileupload.js實(shí)現(xiàn)上傳文件功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-04-04
這篇文章主要介紹了js查找節(jié)點(diǎn)的方法,實(shí)例總結(jié)了查找節(jié)點(diǎn)常用的三種方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了JS實(shí)現(xiàn)圖片局部放大或縮小的方法,涉及javascript事件響應(yīng)及頁面元素動態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-08-08