利用递增的数字返回循环渐变的颜色的js函数

 其实很久前就想写一个这样的函数了。因为很多时候需要利用递增数字返回一个渐变颜色序列，今天终于完成了。函数如下：

 

使用gCL就可以利用递增的数字返回由红到绿到蓝的渐变颜色了。渐变效果如下，共15种颜色，循环渐变：

 

比如下面的应用，使用这个函数可以将超级链接的背景色进行渐变：

1. <a id=a onmouseover='cancel=0;colorful()' onmouseout='cancel=1;' href="http://fine3x.com">主页</a>
3. <Script language=JScript>
4. <!--
5. function gCL(i){
6.     var f=parseInt((i%15)/5);
7.     i=i%15%5;
8.     switch(f){
9.     case 0:return "#"+cS2(255-i*51)+cS2(i*51)+"00";
10.     case 1:return "#00"+cS2(255-i*51)+cS2(i*51);
11.     case 2:return "#"+cS2(i*51)+"00"+cS2(255-i*51);
12.     }
13. }
14. function cS2(i) {
15.     var s=i.toString(16);
16.     return ("00"+s).substr(s.length);
17. }
20. var a=document.getElementById('a')
21. var sd=0;
22. var cancel=0;
23. function colorful() {
24.     a.style.backgroundColor=gCL(sd++);
25.     if(!cancel)setTimeout('colorful()',50);
26. }
27. -->
28. </Script>

这个函数加以修改还可以产生更加细致的颜色变化，有兴趣的朋友可以试试。

 

1. function gCL(i){
2.     var f=parseInt((i%15)/5);
3.     i=i%15%5;
4.     switch(f){
5.     case 0:return "#"+cS2(255-i*51)+cS2(i*51)+"00";
6.     case 1:return "#00"+cS2(255-i*51)+cS2(i*51);
7.     case 2:return "#"+cS2(i*51)+"00"+cS2(255-i*51);
8.     }
9. }
10. function cS2(i) {
11.     var s=i.toString(16);
12.     return ("00"+s).substr(s.length);
13. }