masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > 利用递增的数字返回循环渐变的颜色的js代码_javascript技巧

利用递增的数字返回循环渐变的颜色的js代码_javascript技巧

WBOY
Lepaskan： 2016-05-16 18:59:44
asal
1623 orang telah melayarinya

函数如下：

复制代码 代码如下:

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需刷新才能执行]

这个函数加以修改还可以产生更加细致的颜色变化，有兴趣的朋友可以试试。
Label berkaitan：
递增，数字，循环，渐变，颜色
sumber：php.cn
Artikel sebelumnya：javascript TextArea动态显示剩余字符_表单特效 Artikel seterusnya：javascript脚本编程解决考试分数统计问题_javascript技巧
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...
daripada 2024-04-29 11:01:01
0
3
2250
Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?
daripada 2024-04-23 00:22:19
0
11
2388
Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.
daripada 2024-04-19 15:37:47
0
1
2000
Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...
daripada 2024-04-18 23:52:34
0
1
1885
Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
daripada 2024-04-16 10:10:18
0
0
1955
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan