利用遞增的數(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ù)字返回由紅到綠到藍(lán)的漸變顏色了。漸變效果如下，共15種顏色，循環(huán)漸變：
比如下面的應(yīng)用，使用這個函數(shù)可以將超級鏈接的背景色進行漸變：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
這個函數(shù)加以修改還可以產(chǎn)生更加細(xì)致的顏色變化，有興趣的朋友可以試試。
復(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ù)字返回由紅到綠到藍(lán)的漸變顏色了。漸變效果如下，共15種顏色，循環(huán)漸變：
比如下面的應(yīng)用，使用這個函數(shù)可以將超級鏈接的背景色進行漸變：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
這個函數(shù)加以修改還可以產(chǎn)生更加細(xì)致的顏色變化，有興趣的朋友可以試試。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了js實現(xiàn)的訂閱發(fā)布者模式,結(jié)合完整示例形式分析了js訂閱發(fā)布者模式相關(guān)實現(xiàn)與使用方法,需要的朋友可以參考下2020-03-03
前端時間因為項目需要，要對一個產(chǎn)品下所有的附屬圖片進行分頁顯示，沒考慮ajax一張張請求，所以干脆一次性全部把圖片out，然后在載入的時候進行分頁，網(wǎng)上很多jquery,property等都實現(xiàn)了2009-12-12
微信小程序云開發(fā)實現(xiàn)數(shù)據(jù)添加、查詢和分頁
這篇文章主要為大家詳細(xì)介紹了微信小程序云開發(fā)實現(xiàn)數(shù)據(jù)添加、查詢和分頁，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
BOM系列第三篇之定時器應(yīng)用(時鐘、倒計時、秒表和鬧鐘)
這篇文章主要介紹了BOM系列第三篇之定時器應(yīng)用(時鐘、倒計時、秒表和鬧鐘) 的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
js 動態(tài)給元素添加、移除事件的實現(xiàn)方法
下面小編就為大家?guī)硪黄猨s 動態(tài)給元素添加、移除事件的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
跟我學(xué)Node.js（四）---Node.js的模塊載入方式與機制
Node.js中模塊可以通過文件路徑或名字獲取模塊的引用。模塊的引用會映射到一個js文件路徑，除非它是一個Node內(nèi)置模塊。Node的內(nèi)置模塊公開了一些常用的API給開發(fā)者，并且它們在Node進程開始的時候就預(yù)加載了。2014-06-06
寫了個XML+Tree無窮樹js版...2007-09-09
本文從代碼角度和宏觀角度簡單闡述了微信小程序在前端領(lǐng)域的一些內(nèi)容和影響，希望能夠幫助那些不了解微信小程序的開發(fā)者很快入門并認(rèn)識這一新的技術(shù)領(lǐng)域。2016-12-12
投票想必大家并不陌生吧，下面為大家介紹下使用js是如何寫一個簡易的投票2013-11-11
這篇文章主要介紹了JavaScript作用域 閉包的相關(guān)資料，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07