如何实现RGB颜色线性渐变
我需要根据变量的属性值设置其不同的颜色,通过RGB控制颜色,颜色是由蓝,绿,黄,红平滑渐变的,哪位大侠能告诉我该如何实现?
渐变弄个定时器 难道不行?
<html> <head> <title>_bccn_</title> </head> <body> <script> var s = 0; (function(){ var label = document.createElement("label"); if (!label){ return; } label.innerHTML = "_bccn_"; document.body.appendChild(label); label.style.fontSize = "20px"; label.style.fontWeight = "bold"; setInterval(function(){ var color; switch (s){ case 0: color = "red"; break; case 1: color = "blue"; break; case 2: color = "green"; break; default: color = "black"; break; } label.style.color = color; ++s; if (4 <= s){ s = 0; } }, 1000); })(); </script> </body> </html>
<!DOCTYPE html> <html> <style type="text/css"> </style> <script> var i = 0; function onLoad(){ var label = document.getElementsByTagName("label")[0]; label.style.fontSize = "14pt"; label.style.fontWeight = "bolid"; setInterval(function(){ if (i >= 0xffffff){ i = 0; } label.style.color = "#" + i; ++i; }, 100); } </script> <body onload="onLoad()"> <label>Hello body</label> </body> </html>
for循环中: var speed = arrList1[i][j]; var col, r, g, b; if (speed > 2 && speed < 8) { col = speed - 3; r = 0; g = Math.round(col * 51); b = 255; } else if (speed >= 8 && speed < 13) { col = speed - 8; r = 0; g = 255; b = Math.round(255 - col * 51); } else if (speed >= 13 && speed < 18) { col = speed - 13; r = Math.round(col * 51); g = 255; b = 0; } else if (speed >= 18 && speed < 23) { col = speed - 18; r = 255; g = Math.round(255 - col * 51); b = 0; } else { r = 255; g = 0; b = 0; }r,g,b作为参数传进去分别作为RGB( R,G,B)的变量