利用递增的数字返回循环渐变的颜色的js代码
更新时间：2008年10月22日 02:29:37 作者：
其实很久前就想写一个这样的函数了。因为很多时候需要利用递增数字返回一个渐变颜色序列，今天终于完成了。
函数如下：
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就可以利用递增的数字返回由红到绿到蓝的渐变颜色了。渐变效果如下，共15种颜色，循环渐变：
比如下面的应用，使用这个函数可以将超级链接的背景色进行渐变：
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
这个函数加以修改还可以产生更加细致的颜色变化，有兴趣的朋友可以试试。
复制代码 代码如下:
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就可以利用递增的数字返回由红到绿到蓝的渐变颜色了。渐变效果如下，共15种颜色，循环渐变：
比如下面的应用，使用这个函数可以将超级链接的背景色进行渐变：
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
这个函数加以修改还可以产生更加细致的颜色变化，有兴趣的朋友可以试试。
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了判断文件是否正在被使用的JS代码，有需要的朋友可以参考一下2013-12-12
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
这篇文章主要介绍了js找出5个数中最大的一个数和倒数第二大的数实现方法,结合实例形式总结分析了JavaScript数组遍历、排序、判断、比较等相关操作技巧,需要的朋友可以参考下2020-03-03
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
本篇文章是对使用javascript:将其它类型值转换成布尔类型值的解决方法进行了详细的分析介绍。需要的朋友参考下2013-05-05
应用uni-app开发跨平台App项目时,上传图片、文档等资源功能需求十分常见,下面这篇文章主要给大家介绍了关于uniapp基础篇之上传图片的相关资料,需要的朋友可以参考下2022-12-12
给一个Flash加一个超链接,原想直接在object外直接套一个超链接即可，试了之后却发现不是这么回事2013-06-06
这篇文章主要介绍了微信小程序picker组件两列关联使用方式,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-10
这篇文章主要介绍了JavaScript弹出新窗口后向父窗口输出内容的方法,涉及javascript窗口操作的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-04-04
别人写的 js 格式代码,说是不会死机,可以格式超长代码.2008-05-05
这篇文章主要介绍了js 二进制流转图片的操作方法,接收数据大家需要注意,如果后端的接口是get方法,可以直接使用img标签,本文通过示例代码讲解的非常详细,需要的朋友参考下吧2023-12-12
这篇文章主要为大家详细介绍了AJAX的图书管理代码实例，使用数据库，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
最新评论