利用遞增的數(shù)字返回循環(huán)漸變的顏色的js代碼
更新時間：2008年10月22日 02:29:37 作者：
其實很久前就想寫一個這樣的函數(shù)了。因為很多時候需要利用遞增數(shù)字返回一個漸變顏色序列，今天終于完成了。
函數(shù)如下：
function gCL(i){
var f=parseInt((i%15)/5);
i=i%15%5;
switch(f){
case 0:return "#"+cS2(255-i*51)+cS2(i*51)+"00";
case 1:return "#00"+cS2(255-i*51)+cS2(i*51);
case 2:return "#"+cS2(i*51)+"00"+cS2(255-i*51);
}
}
function cS2(i) {
var s=i.toString(16);
return ("00"+s).substr(s.length);
}
使用gCL就可以利用遞增的數(shù)字返回由紅到綠到藍的漸變顏色了。漸變效果如下，共15種顏色，循環(huán)漸變：
比如下面的應(yīng)用，使用這個函數(shù)可以將超級鏈接的背景色進行漸變：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
這個函數(shù)加以修改還可以產(chǎn)生更加細致的顏色變化，有興趣的朋友可以試試。
復(fù)制代碼 代碼如下:
function gCL(i){
var f=parseInt((i%15)/5);
i=i%15%5;
switch(f){
case 0:return "#"+cS2(255-i*51)+cS2(i*51)+"00";
case 1:return "#00"+cS2(255-i*51)+cS2(i*51);
case 2:return "#"+cS2(i*51)+"00"+cS2(255-i*51);
}
}
function cS2(i) {
var s=i.toString(16);
return ("00"+s).substr(s.length);
}
使用gCL就可以利用遞增的數(shù)字返回由紅到綠到藍的漸變顏色了。漸變效果如下，共15種顏色，循環(huán)漸變：
比如下面的應(yīng)用，使用這個函數(shù)可以將超級鏈接的背景色進行漸變：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
這個函數(shù)加以修改還可以產(chǎn)生更加細致的顏色變化，有興趣的朋友可以試試。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了判斷文件是否正在被使用的JS代碼，有需要的朋友可以參考一下2013-12-12
js找出5個數(shù)中最大的一個數(shù)和倒數(shù)第二大的數(shù)實現(xiàn)方法示例小結(jié)
這篇文章主要介紹了js找出5個數(shù)中最大的一個數(shù)和倒數(shù)第二大的數(shù)實現(xiàn)方法,結(jié)合實例形式總結(jié)分析了JavaScript數(shù)組遍歷、排序、判斷、比較等相關(guān)操作技巧,需要的朋友可以參考下2020-03-03
使用javascript:將其它類型值轉(zhuǎn)換成布爾類型值的解決方法詳解
本篇文章是對使用javascript:將其它類型值轉(zhuǎn)換成布爾類型值的解決方法進行了詳細的分析介紹。需要的朋友參考下2013-05-05
uniapp基礎(chǔ)篇之上傳圖片的實戰(zhàn)步驟
應(yīng)用uni-app開發(fā)跨平臺App項目時,上傳圖片、文檔等資源功能需求十分常見,下面這篇文章主要給大家介紹了關(guān)于uniapp基礎(chǔ)篇之上傳圖片的相關(guān)資料,需要的朋友可以參考下2022-12-12
給一個Flash加一個超鏈接,原想直接在object外直接套一個超鏈接即可，試了之后卻發(fā)現(xiàn)不是這么回事2013-06-06
微信小程序picker組件兩列關(guān)聯(lián)使用方式
這篇文章主要介紹了微信小程序picker組件兩列關(guān)聯(lián)使用方式,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-10-10
JavaScript彈出新窗口后向父窗口輸出內(nèi)容的方法
這篇文章主要介紹了JavaScript彈出新窗口后向父窗口輸出內(nèi)容的方法,涉及javascript窗口操作的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-04-04
別人寫的 js 格式代碼,說是不會死機,可以格式超長代碼.2008-05-05
這篇文章主要介紹了js 二進制流轉(zhuǎn)圖片的操作方法,接收數(shù)據(jù)大家需要注意,如果后端的接口是get方法,可以直接使用img標(biāo)簽,本文通過示例代碼講解的非常詳細,需要的朋友參考下吧2023-12-12
這篇文章主要為大家詳細介紹了AJAX的圖書管理代碼實例，使用數(shù)據(jù)庫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02