正文
前端的console.log的效果写法
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
不说废话，直接上代码：
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title></title>
</head> <body> </body>
<script>
// 清空控制台
console.clear();
// 普通的例子（输出黑色的字体-变大）
console.log("%cHelloWorld", "font-size:20pt");
// 普通的例子（实现颜色控制）
console.log("%cHelloWorld %cHelloWorld %cHelloWorld", "color:red", "color:green", "color:orange;font-weight:bold");
// 普通的例子（阴影效果）
console.log("%cHelloWorld", "text-shadow: 3px 1px 1px grey");
// 普通的例子（彩色字体）
console.log('%cHelloWorld', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;');
// 例子（带背景的字体）
console.log("%cHelloWorld", "background: rgba(252,234,187,1);background: -moz-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%,rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);background: -webkit-gradient(left top, right top, color-stop(0%, rgba(252,234,187,1)), color-stop(12%, rgba(175,250,77,1)), color-stop(28%, rgba(0,247,49,1)), color-stop(39%, rgba(0,210,247,1)), color-stop(51%, rgba(0,189,247,1)), color-stop(64%, rgba(133,108,217,1)), color-stop(78%, rgba(177,0,247,1)), color-stop(87%, rgba(247,0,189,1)), color-stop(100%, rgba(245,22,52,1)));background: -webkit-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);background: -o-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);background: -ms-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);background: linear-gradient(to right, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#f51634', GradientType=1 );font-size:5em");
// 例子（带背景图片的例子）
console.log("%c", "padding:50px 300px;line-height:120px;background:url('http://newimg88.b0.upaiyun.com/newimg88/2014/03/jquery.png') no-repeat;");
// 例子（二级菜单效果）
console.groupCollapsed('%cHelloWorld', 'color:#009a61; font-size: 28px; font-weight: 300');
console.log("%c%c网站名称%cHelloWorld", "line-height:28px;", "line-height:28px;padding:4px;background:#222;color:#fff;font-size:16px;margin-right:15px", "color:#3fa9f5;line-height:28px;font-size:16px;");
console.log("%c%c网站地址%cHelloWorld", "line-height:28px;", "line-height:28px;padding:4px;background:#222;color:#fff;font-size:16px;margin-right:15px", "color:#ff9900;line-height:28px;font-size:16px;");
console.groupEnd(); // 结束标记
// 例子（程序员专用BUG）
console.log([
" _ooOoo_",
" o8888888o",
" 88\" . \"88",
" (| -_- |)",
" O\\ = /O",
" ____/`---'\\____",
" .' \\\\| |// `.",
" / \\\\||| : |||// \\",
" / _||||| -:- |||||- \\",
" | | \\\\\\ - /// | |",
" | \\_| ''\\---/'' | |",
" \\ .-\\__ `-` ___/-. /",
" ___`. .' /--.--\\ `. . __",
" .\"\" '< `.___\\_<|>_/___.' >'\"\".",
" | | : `- \\`.;`\\ _ /`;.`/ - ` : | |",
" \\ \\ `-. \\_ __\\ /__ _/ .-` / /",
"======`-.____`-.___\\_____/___.-`____.-'======",
" `=---='",
"^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^",
" 佛祖保佑 永无BUG"
].join('\n'));
</script> </html>
效果是：
