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>