网站前端开发设置console.log个性化输出

admin2023-12-15 23:09:36

作为一个前端开发我们在浏览一些博客的时候f12查看往往会看见好多博主设置了一些个性化的输出,感觉非常好看,我自己也设置了一些,感觉比较好看,供大家参考

我们会用的占位符

直接上代码:

console.log('%c秘密武器开发者中心 https://www.mimiwuqi.com', 'font-family:'Microsoft YaHei','SF Pro Display',Roboto,Noto,Arial,'PingFang SC',sans-serif;color:white;background:#6ba263;padding:8px 0;');

效果就是你们点开我的网站按下f12

解释一下这段代码:

%c是一个占位符,用于应用CSS样式到后面的字符串。在你给定的代码中,每一个%c对应一个样式字符串和一个文本字符串。

前面的字符串部分说明了样式,包含字体(font-family)、颜色(color)、背景色(background)和内边距(padding)等属性。后面的字符串部分是其它含有样式的内容。

这里是整个代码的分析:

第一个%c应用在之后的'秘密武器开发者中心 https://www.mimiwuqi.com '文本上,设置了字体、颜色、背景色和内边距。

第二个%c应用在之后的' '(一个空格)文本上,设置了和第一部分不同的颜色和背景色。


还有一个设置3d文字效果

console.log("%c秘密武器开发者中心"," text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:5em");

你们可以改成自己博客名字,或者自己测试一下

效果如图: