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