1. 资源洞-虚拟资源各类行业资源项目分享首页
  2. 系统工具

js中console.log的用法，console.log()不显示结果

投稿用户 • • 系统工具                               访问量:1328 • 阅读 828
文章头部资源免费放送

控制台是每个开发过程中非常有用的部分。 我们出于各种原因使用它来记录项目、查看数据、保留某些数据以供以后使用等等。 因此，考虑到经常要与它直接和间接地互动，我们介绍一种方法来赋予它美丽的外观，可以使输出的内容更加诱惑你的眼球。

在这篇文章中，我们将演示如何给console应用样式。让我们从记录一个简单的“Hello World！”开始。 并对其应用样式。

输出粉色的文字
console.log(“%cHello world!”, “color:pink; font-size:30px”)

js中console.log的用法，console.log()不显示结果

可以看到，其实就是对输出内容，应用了css样式而已，只要你会CSS, 你就可以充分发挥你的想象力来定制化你的console。再来点例子：

console.log("%cThis is a default font style","color: blue; font-size: 20px");

console.log("%cThis is a custom font style","color: blue; font-family:serif; font-size: 20px");

console.log("%cThis is a custom font style","color: blue; font-family:monospace; font-size: 20px");

console.log("%cThis is a custom font style","color: blue; font-family:sans-serif; font-size: 20px");

js中console.log的用法，console.log()不显示结果

稍微复杂点的例子如下：

console.log('%c Hello World!!', '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)');

js中console.log的用法，console.log()不显示结果

对了，你还可以改变背景颜色，甚至加入渐变色：

console.log(‘%c 太棒了!!’, ‘background:linear-gradient(to right, #fc5c7d, #6a82fb); color:white; font-size:40px; padding:15px;’)

js中console.log的用法，console.log()不显示结果

console.warn, console.error同样适用哦。

js中console.log的用法，console.log()不显示结果

怎么样，是不是很酷？

最后提醒大家，不要忘记要在显示内容的前面加上%c说明符来设置控制台的内容。

文章中若有涉及到的资源、文件、教程、软件等有需要，添加 微信：zyho686  另备注：免费资源，私信洞主资源名索要！

文章尾部免费资源多多引导加微

跳转查看>>资源洞免费营销资源
本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 3231809820@qq.com 举报，一经查实，本站将立刻删除。
如若转载，请注明出处：https://www.zyhole.com/2597.html
赞 (0)
投稿用户
0
上一篇 2022年7月26日 pm10:03
下一篇 2022年7月26日 pm10:50

相关推荐

在线客服
在线客服
QQ客服