怎么根据时间控制颜色渐变呢-JavaSript-爱易网页

怎么根据时间控制颜色渐变呢

日期：2014-05-16　浏览次数：20399 次

如何根据时间控制颜色渐变呢？
需求是想要一个div块由黄变成红色，而这个转变的过程由具体时间来控制，可以想象成太阳，现在是正午所以是黄色，可是打了下午五六点就应该变成橘红色。。。能达到这种效果吗？

------解决方案--------------------
根据时间改变div 的背景就行了
------解决方案--------------------
颜色由RGB代码表示，可以根据时间慢慢的变化，如从#000000、#000001、#000002....#000009、#000010、#000001.....#FFFFFF
------解决方案--------------------

HTML code


<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>颜色渐变</title>
    <script type="text/javascript">
    var Color = {
        startColor : null,
        endColor : null,
        length: 0,
        space : null,
        init : function(startColor, endColor, length){        
            this.startColor = this.convertColor(startColor);;
            this.endColor = this.convertColor(endColor);
            this.length = length;
            
            if(this.startColor && this.endColor && length){
                var rc = this.startColor, ec = this.endColor,len = length - (length > 1 ? 1 : 0);
                this.space = {R : (ec.R - rc.R) / len, G : (ec.G - rc.G) / len, B : (ec.B - rc.B) / len};
            }
        },
        convertColor : function(colorString){
            if(/^#(\w{2})(\w{2})(\w{2})$/.test(colorString)){
                return {R : parseInt(RegExp.$1, 16), G : parseInt(RegExp.$2, 16), B : parseInt(RegExp.$3, 16)};
            }
            return null;                                             
        },
        format : function(n){
            if(n < 0) n = 0;        
            return ("0" + parseInt(n).toString(16)).slice(-2);
        },
        getColor : function(current){
            var rc = this.startColor, ec = this.endColor, s = this.space, color;
            if(!rc || !ec || !this.length){
                return "";
            }

            color = this.format(rc.R + s.R*current) + this.format(rc.G + s.G*current) + this.format(rc.B + s.B*current);
            return "#" + color;
        }
    };
    window.onload = function(){
        var box = document.getElementById("box"),
            sColor = "#FFFF00", eColor = "#FF0000",
            cur = 0, step = 100, interval = 100;
        
        Color.init(sColor, eColor, step);
        (function(){
            box.style.backgroundColor = Color.getColor(cur);
            if(++cur < step){
                setTimeout(arguments.callee, interval);
            }
        })();
    };
    </script>
</head>

<body>
    <div id="box" style="width:200px;height:200px; margin:100px auto;"></div>
</body>
</html>

------解决方案--------------------
CSS3渐变吧  -webkit-linear-gradient（diraction,startColor,endColor）;
diraction:渐变的方向，top left right bottom  
startColor和endColor是颜色，开始和结束的颜色，这样就渐变了。根据你的需要加前缀可以将webkit改成moz火狐的等等。。。。IE9不知道支持不 没有试过。然后参数通过JS根据时间动态传入就可以了

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

怎么根据时间控制颜色渐变呢

相关资料更多>

推荐阅读更多>