开篇寄语
在Javascirpt中肯定绕不开console.log,也就是调试,一般会在控制台输出,其实呢,该调试也能玩出很多有意思的事情,比如留下一段有趣的故事,各种有创意的图像,那么如何实现呢?请看本篇文章,同时会奉上一些有意思的方案。
内容详情
其实实现非常简单,只需要以下代码例子:
const style = 'font-size: 24px; color: red; padding: 8px;'; console.log('%cO(∩_∩)O 调试红色!', style);
生成效果如下所示:
很简单吧,但是要想生成出有特色的图案则需要讲究一些规则了,看一下其他例子,或许能够带给你启发。
console.log("%c CapsCode!", "font-weight: bold; font-size: 50px;color: red; text-shadow: 3px 3px 0 rgb(217,31,38) , 6px 6px 0 rgb(226,91,14) , 9px 9px 0 rgb(245,221,8) , 12px 12px 0 rgb(5,148,68) , 15px 15px 0 rgb(2,135,206) , 18px 18px 0 rgb(4,77,145) , 21px 21px 0 rgb(42,21,113); margin-bottom: 12px; padding: 5%");
console.log("%c ", "font-size: 1px; padding: 166.5px 250px; background-size: 500px 333px; background: no-repeat url(https://www.capscode.in/static/media/cap.0d0af8f0.png);");
console.log("%c ", "font-size: 1px; padding: 215px 385px; background-size: 770px 430px; background: no-repeat url(https://i0.wp.com/i.giphy.com/media/ZVik7pBtu9dNS/giphy-downsized.gif?w=770&ssl=1);");
- 我的微信
- 微信扫一扫加好友
- 我的微信公众号
- 扫描关注公众号