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