定义和用法

console.log() 方法用于在控制台输出信息。
该方法对于开发过程进行测试很有帮助。
提示: 在测试该方法的过程中,控制台需要可见 (浏览器按下 F12 打开控制台,直接查看方法按键组合:Ctrl+Shift+J)。


参数类型描述
messageString或Object必需,控制台上要显示的信息。

彩蛋实例代码:

以%c开头,后面的文字就打印的信息,后面一个参数就是样式属性;可以尝试多个样式,每碰到一个%c开头就会应用对应的样式,
所有的 console.log() 必须在 <script> 标签内,可添加多条console.log()在<script>标签组合内</script>,如下两条!在样式中你可以通过css3属性写彩色字,文字描边等等。


有阴影文字

<script>
console.log("%c[00625.Cc]", "text-shadow: 3px 1px 1px grey")
console.log("%c[00625.Cc]", "text-shadow: 3px 1px 1px grey")
</script>

----------

横条上显示文字

这里有个"font-size:2pt",里面的数字2是可以随便调的,就是调显示大小的意思!

console.log("%c 我跟你讲,你不要在这里乱搞哦!", "font-size:2pt")

背景图片

不要引用我的图片,你可以打开图片地址后,自己保存,因为有时候我可能换图片,把图片删了!

console.log("%c ", "background: url(http://00625.cc/usr/uploads/2019/111101/2091979570.png) no-repeat center;padding-left:380px;padding-bottom: 172px;")

折叠菜单下文字

var myObj = { name : "我的记事本", site : "00625.Cc" };
;
console.log(myObj);

彩色文字

console.log('%c你在看什么? ', '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("%c 你的左手在哪? %c 我看到你了 %c 把你的右手拿开", "color:red","","color:orange;font-weight:bold")

带连接版权背景颜色文字

console.log("\n%c 博客 By 我的记事本 %c http://00625.cc ","color:#fff;background:#000;padding:5px 0","color:#fff;background:#666;padding:5px 0")

总结

还有N种写法,上面只是其中的几个例子而已,上面的例子也不是真实用意,只是我们拿来做创意彩蛋而已!有名的百度网站好几个页面也有你可以去看下,具体用途就看你自己了,拿来装逼也是不错的,,哈哈哈。。。

console彩蛋

文章目录