原生js生成渐变色数组集合

最新推荐文章于 2023-03-28 11:17:33 发布

jlhejs

最新推荐文章于 2023-03-28 11:17:33 发布

阅读量3.5k

点赞数

分类专栏：前端开发文章标签： js 前端渐变色随机色生成渐变色

本文链接：https://blog.csdn.net/kouhunzhe/article/details/79542866

版权

前端开发专栏收录该内容

24 篇文章 0 订阅

订阅专栏

个人博客：http://www.guoit.com

简化了下背景，给定三个变量，分别为开始colorMAX色，结束色colorMIN，生成颜色个数num，生成一个长度为num的数组（这个数组为开始色到渐变色的数组）。

使用的范围，用户选择色调，生成和这个色调相关的颜色

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

    <title></title>
</head>
<body>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<script>



    String.prototype.colorRgb = function(){
        var sColor = this.toLowerCase();
        //十六进制颜色值的正则表达式
        var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
        // 如果是16进制颜色
        if (sColor && reg.test(sColor)) {
            if (sColor.length === 4) {
                var sColorNew = "#";
                for (var i=1; i<4; i+=1) {
                    sColorNew += sColor.slice(i, i+1).concat(sColor.slice(i, i+1));
                }
                sColor = sColorNew;
            }
            //处理六位的颜色值
            var sColorChange = [];
            for (var i=1; i<7; i+=2) {
                sColorChange.push(parseInt("0x"+sColor.slice(i, i+2)));
            }
            return "RGB(" + sColorChange.join(",") + ")";
        }
        return sColor;
    };
    /**
     * 生成渐变色，从绿色到红色的渐变
     * colorMAX   str 如"rgb(204,189,196)"或者"#bd1717"
     * colorMIN  str 如"rgb(15,25,89)"或者"#cccccc"
     * num  number  生成颜色个数
     */
    function ShadeColor(colorMAX,colorMIN,num){

        var colorMAX=colorMAX.toLowerCase();
        var colorMIN=colorMIN.toLowerCase();
        var RegHex = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
        if(RegHex.test(colorMAX)&&/^rgb/.test(colorMAX)){
            colorMAX="rgb(221,221,221)"
        }else if(RegHex.test(colorMIN)&&/^rgb/.test(colorMIN)){
            colorMIN="rgb(116,116,116)"
        }
        if(RegHex.test(colorMAX)){
            colorMAX=colorMAX.colorRgb()
        }
        if(RegHex.test(colorMIN)){
            colorMIN=colorMIN.colorRgb()
        }

        colorMAX=colorMAX.slice(4,-1).split(",")
        colorMIN=colorMIN.slice(4,-1).split(",")
                console.log(colorMIN);
        var colors= [];
        //默认的最深颜色
        var red = colorMAX[0]-0,green = colorMAX[1]-0, blue = colorMAX[2]-0;
        //最浅颜色是239,239,239 比如：最浅颜色的red是 239 则差值为239-134=105
        var maxRed = colorMIN[0]-0,maxGreen = colorMIN[1]-0,maxBlue = colorMIN[2]-0;
        var level = num;
        while(level--) {
            colors.push( 'rgb('+red +','+green+','+blue+')');
            red += parseInt(maxRed/num);
            green += parseInt(maxGreen/num);
            blue += parseInt(maxBlue/num);
        }
        return colors;
    }
    //    调用方法
    var ss=ShadeColor("#bd1717","rgb(204,189,196)",30)
    console.log(ss);
    for(var i=0;i<ss.length;i++){
        $($("li")[i]).css("background",ss[i])
    }
</script>
</body>
</html>

jlhejs

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生js生成渐变色数组集合

个人博客：http://www.guoit.com简化了下背景，给定三个变量，分别为开始colorMAX色，结束色colorMIN，生成颜色个数num，生成一个长度为num的数组（这个数组为开始色到渐变色的数组）。使用的范围，用户选择色调，生成和这个色调相关的颜色<!DOCTYPE html><html><head lang="en"...
复制链接

扫一扫

专栏目录