【前端】控制台彩蛋彩色键盘

news2025/11/1 2:34:30

效果如图
控制台

代码如下

      
const colors = {
	reset: "\x1b[0m",
	red: "\x1b[31m",
	green: "\x1b[32m",
	yellow: "\x1b[33m",
	blue: "\x1b[34m",
	magenta: "\x1b[35m",
	cyan: "\x1b[36m",
	white: "\x1b[37m",
};

console.log(`
	${colors.red}   ┌─────────────────────────────────────────────────────────────┐${colors.reset}
	${colors.red}   │${colors.green}┌───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┐${colors.red}│${colors.reset}
	${colors.red}   │${colors.cyan}│Esc│!1 │@2 │#3 │$4 │%5 │^6 │&7 │*8 │(9 │)0 │_- │+= │|\\ │~  │${colors.red}│${colors.reset}
	${colors.red}   │${colors.green}├───┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴───────┐${colors.red}│${colors.reset}
	${colors.red}   │${colors.cyan}│ Tab │ Q │ W │ E │ R │ T │ Y │ U │ I │ O │ P │{ [ │ }] │ BS│${colors.red}│${colors.reset}
	${colors.red}   │${colors.green}├─────┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴─────────┤${colors.red}│${colors.reset}
	${colors.red}   │${colors.cyan}│ Ctrl │ A │ S │ D │ F │ G │ H │ J │ K │ L │: ;│" '│ Enter  │${colors.red}│${colors.reset}
	${colors.red}   │${colors.green}├──────┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴────┬───────┤${colors.red}│${colors.reset}
	${colors.red}   │${colors.cyan}│ Shift  │ Z │ X │ C │ V │ B │ N │ M │< ,│> .│?/│Shift │Fn  │${colors.red}│${colors.reset}
	${colors.red}   │${colors.green}└─────┬──┴┬──┴──┬┴───┴───┴───┴───┴───┴──┬┴───┴┬──┴┬─────┴───┘${colors.red}│${colors.reset}
	${colors.red}   │${colors.cyan}      │Fn │ Alt │         Space         │ Alt │Win│          ${colors.red}│${colors.reset}
	${colors.red}   │${colors.green}      └───┴─────┴───────────────────────┴─────┴───┘          ${colors.red}│${colors.reset}
	${colors.red}   └─────────────────────────────────────────────────────────────┘${colors.reset}
`);