-

xiyueta.js库里xiyueta.debug()测试里背景颜色块生成(图文教程)

xiyueta.js库里xiyueta.debug()测试里背景颜色块生成代码部分,有多个颜色块可选择
在 xiyueta.more.js 文件里的884行,xiyueta.getLogItem = function(s, nLevel) {
案例预览>>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>xiyueta.js库里xiyueta.debug()测试里背景颜色块生成</title>
</head>

<body>
    <script>
    var red = ['#ff461f', '#ff4777', '#ffb3a7', '#f47983', '#c93756', '#ff0097']
    var green = ['#bce672', '#00bc12', '#057748', '#00e500', '#3de1ad', '#1bd1a5']
    var blue = ['#70f3ff', '#44cef6', '#1685a9', '#003472', '#4b5cc4', '#b0a4e3', '#8d4bbb']

    var color = red.concat(green);
    color = color.concat(blue);

    var c1 = ""
    var c2 = ""
    var colorList = ""
    for (var i = 0; i < color.length; i++) {
        console.log(i, color[i])
        c1 += '<div style="background:' + color[i] + ';padding:6px;">' + color[i]
        c2 += "</div>"
        if (colorList != '') colorList += ",";
        colorList += '"' + color[i] + '"';
    }
    document.write("第一组颜色列表:" + colorList);
    document.write(c1 + c2)


    var c3 = '"#f3f3f3"';
    for (var i = 0; i < 20; i++) {
        if (i < red.length) {
            c3 += ',"' + red[i] + '"';
        }
        if (i < green.length) {
            c3 += ',"' + green[i] + '"';
        }
        if (i < blue.length) {
            c3 += ',"' + blue[i] + '"';
        }
    }
    document.write("第二组颜色列表(好,在xiyueta.js里选用这种):" + c3);
    console.log(c3)

    var color = c3.split(",")
    var c1 = ""
    var c2 = ""
    for (var i = 0; i < color.length; i++) {
        console.log(i, color[i])
        c1 += '<div style="background:' + color[i].replace(/"/g, "") + ';padding:6px;">' + color[i]
        c2 += "</div>"
    }
    document.write(c1 + c2)

    console.log("----------------------------");

    var c3 = getGroupRGBColor(15);
    document.write("第三组颜色列表:" + c3);

    var color = c3.split(",")
    var c1 = ""
    var c2 = ""
    for (var i = 0; i < color.length; i++) {
        console.log(i, color[i])
        c1 += '<div style="background:' + color[i].replace(/"/g, "") + ';padding:6px;">' + color[i]
        c2 += "</div>"
    }
    document.write(c1 + c2)


    var c3 = getGroupRGBColor2(20);
    document.write("第四组随机生成颜色列表:" + c3);

    var color = c3.split(",")
    var c1 = ""
    var c2 = ""
    for (var i = 0; i < color.length; i++) {
        console.log(i, color[i])
        c1 += '<div style="background:' + color[i].replace(/"/g, "") + ';padding:6px;">' + color[i]
        c2 += "</div>"
    }
    document.write(c1 + c2)


    //获得一组RGB值  20230806  如  xiyueta.getGroupRGBColor(5)
    function getGroupRGBColor(nMax) {
        var c = ""
        var R = 255
        var G = 255
        var B = 255
        var nJian = 50
        for (var i = 1; i <= nMax; i++) {
            var chu = i % 3;
            if (chu == 0) {
                R -= nJian;
            } else if (chu == 1) {
                G -= nJian;
            } else if (chu == 2) {
                B -= nJian;
            }

            // console.log(i,R,G,B)

            var s = getRGBColor(R, G, B)
            // console.log("s",s)
            // c+="<font style='background-color:"+s+"'>"+s+"</font>"
            if (c != "") c += ",";
            c += '"' + s + '"';
        }
        return c;
    }

    //获得一组RGB值 第二种
    function getGroupRGBColor2(nMax) {
        var c = ""
        for (var i = 1; i <= nMax; i++) {

            var R = Math.round(Math.random() * 255);
            var G = Math.round(Math.random() * 255);
            var B = Math.round(Math.random() * 255);
            console.log(i, R, G, B)

            var s = getRGBColor(R, G, B)
            if (c != "") c += ",";
            c += '"' + s + '"';
        }
        return c;
    }


    function getRGBColor(R, G, B) {
        sR = R.toString(16);
        sG = G.toString(16);
        sB = B.toString(16);

        if (sR.length == 1) sR = "0" + sR;
        if (sG.length == 1) sG = "0" + sG;
        if (sB.length == 1) sB = "0" + sB;

        return "#" + sR + sG + sB;
    }
    </script>
</body>

</html>