js 颜色渐变动态加载显示

最新推荐文章于 2024-07-18 11:46:26 发布

蟹海之恋

最新推荐文章于 2024-07-18 11:46:26 发布

阅读量1k

点赞数 1

分类专栏： js 文章标签： js 颜色渐变动态加载 RGB

本文链接：https://blog.csdn.net/DaneLei/article/details/86622805

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

思路：

输入颜色格式转换为RGB十进制计算后，统一转换为RGB格式输出

效果图：

<!DOCTYPE html>
<html>
<head>
	<title>颜色动态加载</title>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
	<script type="text/javascript">
    /**
	*	author : 蟹海之恋
	*	startColor : 开始颜色
	*	endColor : 结束颜色
	*	step : 阶段数
	*	HINT : 支持颜色格式混搭或统一格式
	*/
 
	function gradualColor(startColor, endColor, step) {
        var startRGB = convertColor(startColor);
        var startR = startRGB[0] - 0;//转数字
        var startG = startRGB[1] - 0;
        var startB = startRGB[2] - 0;
 
        var endRGB = convertColor(endColor);
        var endR = endRGB[0];
        var endG = endRGB[1];
        var endB = endRGB[2];
 
        var tR = (endR - startR) / step;//间值
        var tG = (endG - startG) / step;
        var tB = (endB - startB) / step;
 
        var colorArr = [];
        for (var i = 0; i < step; i++) {
            //计算每一步的rgb值
            var rgb = 'rgb(' + parseInt((tR * i + startR)) + ',' + parseInt((tG * i + startG)) + ',' + parseInt((tB * i + startB)) + ')';
            colorArr.push(rgb);
        }
        return colorArr;
    }
	 
    function convertColor (color)
    {
    	if(/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(color)) {//#FFF或#FFFFFF格式
    		if (color.length == 4) {//#FFF转#FFFFFF格式
                var colorTemp = "#";
                for (var i = 1; i < 4; i += 1) {
                    colorTemp += color.slice(i, i + 1).concat(color.slice(i, i + 1));
                }
                color = colorTemp;
            }
            var colorNew = [];
            for (var i = 1; i < 7; i += 2) {
                colorNew.push(parseInt("0x" + color.slice(i, i + 2)));
            }
            return colorNew;
    	}
    	else if(/^rgb/.test(color.toLowerCase())) {//rgb(255,255,255)格式
    		var colorNew = color.replace(/(?:rgb|RGB|\(|\))/g, "").split(",");
    		console.log(colorNew);
    		return colorNew;
    	}
    	else 
    		alert("颜色输入格式不对");
    }
    $(function(){
	    var gradual = new gradualColor('#0000FF', 'RGB(175,238,238)', 10);//支持颜色格式混搭或统一格式
	    for (var i = 0; i < gradual.length; i++) {
	        var htmls = '';
	        if (i == 0) {
	            htmls = '<tr><td  id="water' + i + '" style="width:120px;height:20px;margin-left:10px;"><div></div></td><td style="width:70px;text-align:center">高</td></tr>';
	        } else if (i == gradual.length - 1) {
	            htmls = '<tr><td   id="water' + i + '"style="width:120px;height:20px;margin-left:10px;"><div></div></td><td style="width:70px;text-align:center">低</td></tr>';
	        } else {
	            htmls = '<tr><td  id="water' + i + '" style="width:120px;height:20px;margin-left:10px;"><div></div></td></tr>';
	        }
	        $("#Watercolorlevel").append(htmls);
	        $("#water" + i).css("background-color", gradual[i]);
	    }
    });
</script>
</head>
<body>
	<table id="Watercolorlevel">
	</table>
</body>
</html>

FAQ :

1.Q : 为什么startRGB要转数字而endRGB不需要？

A : 因为startRGB和endRGB做差时会先被强制转换为数字再做减法；而后续计算每步颜色只用startRGB做加减法，所以endRGB就没转数字。

2.Q : "/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/"是什么意思

A : 此为正则表达式。其中^以后边字符开头，$以前边字符结束，[0-9a-fA-F]数字字母，{3}{6}3位6位的。然后用/包起来作为表达式主体。具体语法请参照相关内容。

蟹海之恋

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js 颜色渐变动态加载显示

思路：输入颜色格式转换为RGB十进制计算后，统一转换为RGB格式输出效果图：<!DOCTYPE html><html><head> <title>颜色动态加载</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js">&lt...
复制链接

扫一扫

专栏目录