网站自定义console.log创意彩蛋
侧边栏壁纸
  • 累计撰写 88 篇文章
  • 累计收到 673 条评论
  • 今日更新 0 篇文章

网站自定义console.log创意彩蛋

七年
2021-08-03 / 0 评论 / 69 阅读 / 正在检测是否收录...

定义和用法

console.log() 方法用于在控制台输出信息
该方法对于开发过程进行测试很有帮助
提示: 在测试该方法的过程中,控制台需要可见 (浏览器按下 F12 打开控制台,或者鼠标右键点击 审查元素)

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

彩蛋实例代码

阴影文字

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

Test

横条上显示文字

console.log("%c 愿你历尽千帆,归来还是少年", "font-size:2pt")

Test

背景图片

console.log("%c ", "background: url(https://www.qin0.cn/usr/uploads/2021/06/3784550141.jpg) no-repeat center;padding-left:380px;padding-bottom: 172px;")

Test

折叠菜单下文字

var myObj = { name : "七年博客", site : "www.qin0.cn" };
;
console.log(myObj);

Test

彩色横幅

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;');

Test

不同颜色的文字

console.log("%c 七年博客 %c www.qin0.cn %c 期待你的关注", "color:red","","color:orange;font-weight:bold")

Test

带连接版权背景颜色文字

console.log("\n%c 博客 By 七年 %c www.qin0.cn ","color:#fff;background:#000;padding:5px 0","color:#fff;background:#666;padding:5px 0")

Test

总结

还有N种写法,上面只是其中的几个例子而已,上面的例子也不是真实用意,只是我们拿来做创意彩蛋而已!具体用途就看你自己了,拿来装B也是不错的,哈哈哈

0

七年博客 - 你的专属归

https://www.qin0.cn/
更多精彩文章,按Ctrl+D收藏本站!

评论 (0)

取消
在线人数:1人