如何实现RGB颜色线性渐变 - 编程论坛

#2

诸葛修勤2013-08-04 12:02

渐变弄个定时器难道不行？

#3

诸葛修勤2013-08-04 12:20

程序代码：

<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>

#4

诸葛修勤2013-08-11 13:27

回复 3楼诸葛修勤

程序代码：

<!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>

#5

lieren_li2013-08-12 22:46

回复 4楼诸葛修勤

感谢。问题已经解决了。
不过斑竹的回答倒是让我长见识了，只是不知道能不能实现这样

只有本站会员才能查看附件，请登录

的渐变效果？

#6

诸葛修勤2013-08-13 20:38

回复 5楼 lieren_li

不是一样的吗？

不过想你这样有图片的直接放图片不是更加省事吗？

#7

lieren_li2013-08-14 22:13

回复 6楼诸葛修勤

不一样吧，色谱范围不懂得怎么控制。
我需要的是根据不同的属性，通过循环画多个箭头，属性值越大就越趋向于暖色调。最后用下面的代码实现了

程序代码：

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)的变量
不知道还有没有什么简单方法。。。

#8

有容就大2013-08-14 23:10

厉害学习了