玩转控制台,让console.log千变万化

已收录   阅读次数: 718
2022-01-3020:16:53 发表评论
摘要

在Javascirpt中肯定绕不开console.log,也就是调试,一般会在控制台输出,其实呢,该调试也能玩出很多有意思的事情,比如留下一段有趣的故事,各种有创意的图像,那么如何实现呢?请看本篇文章,同时会奉上一些有意思的方案……

分享至:
玩转控制台,让console.log千变万化

开篇寄语

在Javascirpt中肯定绕不开console.log,也就是调试,一般会在控制台输出,其实呢,该调试也能玩出很多有意思的事情,比如留下一段有趣的故事,各种有创意的图像,那么如何实现呢?请看本篇文章,同时会奉上一些有意思的方案。

内容详情

其实实现非常简单,只需要以下代码例子:

const style = 'font-size: 24px; color: red; padding: 8px;';
console.log('%cO(∩_∩)O 调试红色!', style);

生成效果如下所示:

玩转控制台,让console.log千变万化

很简单吧,但是要想生成出有特色的图案则需要讲究一些规则了,看一下其他例子,或许能够带给你启发。

玩转控制台,让console.log千变万化
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千变万化
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千变万化
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);");
  • 我的微信
  • 微信扫一扫加好友
  • weinxin
  • 我的微信公众号
  • 扫描关注公众号
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: