当前位置:首页 > 软件和技术分享 > 正文内容

让Console漂亮起来,在浏览器控制台添加网站说明

彭淇3年前 (2017-10-06)软件和技术分享34686

让喜欢按F12的访客不至于看到空空的控制台,console打印的文字是可以添加样式的,不过不是全部css效果都有效,这里只介绍一小部分样式。
    \n是换行,可以将一个字符串设置成多行
    %c标记之后的内容使用对应样式,格式如 console.log('%c第一个样式%c第二个样式','css1','css2'); 如此对应
    样式和普通的css效果基本一致,可以设置文字颜色,背景颜色,字体大小,间距,边距等等。还支持部分css3高级效果。
    甚至还支持输出图片,不过我这里测试没有出现效果。
    代码如下:

<script>
console.log("%c%c博客名称%c飞翔勿扰","line-height:28px;","line-height:28px;padding:4px;background:#222;color:#fff;font-size:16px;margin-right:15px","color:#3fa9f5;line-height:28px;font-size:16px;");
console.log("%c%c网站地址%chttp://www.pengqi.club","line-height:28px;","line-height:28px;padding:4px;background:#222;color:#fff;font-size:16px;margin-right:15px","color:#ff9900;line-height:28px;font-size:16px;");
console.log("%c%c企鹅号码%c715366739","line-height:28px;","line-height:28px;padding:4px;background:#222;color:#fff;font-size:16px;margin-right:15px","color:#008000;line-height:28px;font-size:16px;");
console.log("%c%c任何足够先进的技术,初看皆与魔法无异!我一直觉得这句话很有道理,不知道你是不是也这样认为呢。","line-height:28px;","line-height:28px;padding:4px 0px;color:#fff;font-size:16px;background-image:-webkit-gradient(linear,left top,right top,color-stop(0,#ff22ff),color-stop(1,#5500ff));color:transparent;-webkit-background-clip:text;");
</script>


    代码效果如下:


让Console漂亮起来,在浏览器控制台添加网站说明  加载 图形 分享 网页 第1张

扫描二维码至手机访问

扫描二维码推送至手机端访问。

版权声明:本文由淇云博客发布,如需转载请注明出处。

转载请注明出处:https://www.pengqi.club/blog/146.html

分享给朋友:

相关文章

图片无损放大工具Benvista PhotoZoom Pro 7.0.6 中文多语免费版

图片无损放大工具Benvista PhotoZoom Pro 7.0.6 中文多语免费版

今天给小伙伴们整理分享一款图片无损放大工具Benvista PhotoZoom Pro 7.0.6 中文多语免费版。 图片无损放大(BenVista PhotoZoom Pro 中文...

ZBlog备份、恢复与搬家(换空间)方法

ZBlog备份、恢复与搬家(换空间)方法

ZBlog网站完整的备份包括两个主要部分:MySQL数据库 和 zb_users 目录下的主题(theme)、插件(plugin)和附件(upload)。一般的操作方法是:将数据库从旧站导出,然...

zblogPHP加密后台地址:输入问题和答案后方可访问

zblogPHP加密后台地址:输入问题和答案后方可访问

Z-BlogPHP 的后台地址也是众人皆知了,这样暴露后台地址很是危险,万一被有心之人利用,后果不堪设想,下面本站就给大家一个解决方法:解决方法1、将下列代码加入 Z-BlogPHP 主题目录下inc...

新浪微博一件关注html代码

新浪微博一件关注html代码

这几天在完善博客内容,想增加一个新浪微博的关注,但是并没有找到html的,一般都是增加head和js标签的,因为之前弄过这个,所以找了一下之前的代码,代码如下:<iframe width=&qu...

自定义博客侧边栏添加百度一下的方法

自定义博客侧边栏添加百度一下的方法

自定义博客网站侧边栏添加百度一下组件,进行seo优化,也可作为其他使用  首先进入你的博客网站后台-->找到侧边栏-->自定义一个组件-->名称随意啊,然后在框里写入一下代...

利用JS实现网站评论和留言打字特效

先在你网站目录建立一个文件,我自己把它命名为:pengqi,后缀名为JS。建立后打开pengqi.js(不建议用记事本),然后将以下代码复制粘贴进去,具体效果评论和留言可知 以下是J...

评论列表

荷鲁斯
荷鲁斯
3年前 (2017-10-18)

好吧 [face_16]

唯美陌阡
3年前 (2017-10-07)

[code][S19]好羞射,文章真的好赞啊,顶博主![/code]
这个可以有。(⊙﹏⊙)终于搞定寝室WIFI啦,连上网的心情是无与伦比的美丽[S22]

彭淇 回复:
@唯美陌阡:好有缘,我前天凌晨也才搞完寝室WiFi,速度比以前稍微快点了
3年前 (2017-10-08)
唯美陌阡 回复:
@彭淇:(*^▽^*),主要是电信比较坑,想要弄路由器就得破解一人一号限制
3年前 (2017-10-08)
彭淇 回复:
@唯美陌阡:我们这也一样用的电信,一人一号,还手机和电脑不能同时在线,
3年前 (2017-10-08)
唯美陌阡 回复:
@彭淇:简直不能忍,ε=(´ο`*)))唉
3年前 (2017-10-08)

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。