OneNav主题-网站炫酷console.log创意彩蛋收集

教程 5个月前 壳壳
371 0 0
最后更新于2022年3月20日,已超过66天没有更新,如果内容或图片资源失效,请留言反馈,我会及时处理,谢谢!

定义和用法

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

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

彩蛋实例代码:

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

有阴影文字

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

横条上显示文字

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

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

背景图片

不要引用我的图片,你可以打开图片地址后,自己保存,因为有时候我可能换图片,把图片删了!
console.log("%c","background:url(https://img.kkok.cc/wp-content/uploads/2021/11/logo2100-1.png) no-repeat center;padding-left:380px;padding-bottom: 172px;")

折叠菜单下文字

var myObj = { name : "我的记事本", site : "kkok.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 https://kkok.cc ","color:#fff;background:#000;padding:5px 0","color:#fff;background:#666;padding:5px 0")
总结
还有N种写法,上面只是其中的几个例子而已,上面的例子也不是真实用意,只是我们拿来做创意彩蛋而已!有名的百度网站好几个页面也有你可以去看下,具体用途就看你自己了,拿来装逼也是不错的,,哈哈哈。。。
OneNav主题-网站炫酷console.log创意彩蛋收集
版权声明:壳壳 发表于 2021年12月24日 下午8:32。
转载请注明:OneNav主题-网站炫酷console.log创意彩蛋收集 | 壳壳博客

相关文章

暂无评论

暂无评论...
壳壳博客一键登录开启个人书签等功能!