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