用javascript獲取任意顏色的更亮或更暗顏色值示例代碼
更新時(shí)間：2017年07月21日 10:08:32 作者：CHRIS COYIER
最近在工作中遇到的一個(gè)需求，發(fā)現(xiàn)網(wǎng)上沒(méi)有相對(duì)應(yīng)的解決方法，索性自己寫一個(gè)，所以這篇文章主要給大家介紹了關(guān)于利用javascript獲取任意顏色更亮或更暗顏色值的相關(guān)資料，文中給出了詳細(xì)的示例代碼，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。
前言
本文主要給大家介紹的是關(guān)于利用javascript獲取任意顏色更亮或更暗顏色值的相關(guān)內(nèi)容，下面話不多說(shuō)，來(lái)一起看看詳細(xì)的介紹：
預(yù)處理CSS，比如Sass和less可以通過(guò)設(shè)定一個(gè)特定值，讓任何顏色變得更亮或者更暗。但是在javascript中卻沒(méi)有這種方法。下面這個(gè)方法能在javascript中得到一個(gè)更亮或者更暗的值，通過(guò)一個(gè)給定的十六進(jìn)制顏色值（比如#F06D06,或者沒(méi)有#）
示例代碼
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é)
以上就是這篇文章的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了新手入門js閉包學(xué)習(xí)過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10
我們不得面對(duì)這樣一個(gè)事實(shí)：許多程序員不會(huì)規(guī)劃他們的JS代碼。我們經(jīng)?？焖賹懲甏a、運(yùn)行、提交。但當(dāng)我們繼續(xù)開發(fā)遇到變量和函數(shù)時(shí)不得不再次回頭查看它們代表的含義，麻煩就從這里開始了。2013-04-04
JS實(shí)現(xiàn)多物體運(yùn)動(dòng)的方法詳解
這篇文章主要介紹了JS實(shí)現(xiàn)多物體運(yùn)動(dòng)的方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了javascript實(shí)現(xiàn)多物體運(yùn)動(dòng)的原理與相關(guān)操作技巧,需要的朋友可以參考下2018-01-01
全局?jǐn)?shù)據(jù)共享?全局?jǐn)?shù)據(jù)共享(狀態(tài)管理)是為了解決組件之間數(shù)據(jù)共享的問(wèn)題，開發(fā)中常用的全局?jǐn)?shù)據(jù)共享方案有：Vuex、Redux、MobX等，這篇文章主要介紹了微信小程序中如何使用store數(shù)據(jù)共享,需要的朋友可以參考下2023-04-04
JavaScript使用高階生成器進(jìn)行過(guò)濾以生成素?cái)?shù)
生成器大家都知道是怎么一回事,但是高階生成器又是什么東西呢,下面小編就來(lái)為大家簡(jiǎn)單介紹一下如何使用高階生成器進(jìn)行過(guò)濾以生成素?cái)?shù)吧2024-02-02
這篇文章主要介紹了js判斷子窗體是否關(guān)閉的方法,涉及javascript針對(duì)子窗體的獲取與屬性判定技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
window.onload想必大家都有使用過(guò)吧，在窗口加載時(shí)執(zhí)行，如果多次使用window.onload該如何判斷呢？下面與大家分享個(gè)方法2014-09-09
webpack dll打包重復(fù)問(wèn)題優(yōu)化的解決
在使用dll plugin過(guò)程中出現(xiàn)的一個(gè)包依賴問(wèn)題，這個(gè)問(wèn)題導(dǎo)致打出來(lái)的包會(huì)包含重復(fù)的代碼。這篇文章主要介紹了webpack dll打包重復(fù)問(wèn)題優(yōu)化的解決，感興趣的小伙伴們可以參考一下
2018-10-10 
讓 JavaScript 輕松支持函數(shù)重載 (Part 2 - 實(shí)現(xiàn))
在上一篇文章里，我們?cè)O(shè)計(jì)了一套能在JavaScript中描述函數(shù)重載的方法，這套方法依賴于一個(gè)叫做Overload的靜態(tài)類，現(xiàn)在我們就來(lái)看看如何實(shí)現(xiàn)這個(gè)靜態(tài)類。
2009-08-08