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

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

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

让喜欢按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

相关文章

Uconomix uMark 6.1 汉化中文版 专业的图像水印制作工具

Uconomix uMark 6.1 汉化中文版 专业的图像水印制作工具

Uconomix uMark Professional 6.1 汉化中文版是一款专业的水印工具,主要用于给图像添加文字或者图片水印。平常我们在发一些图片时为了保留文章或者图片的出处,一般都会加上水印。...

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

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

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

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

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

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

zblog侧边栏如何实现一图三按钮的效果?

zblog侧边栏如何实现一图三按钮的效果?

可能有的人不太明白什么是一图三按钮的效果,其实就是在侧边栏某一个文本工具中显示有一张图片和三个链接按钮,具体效果请移步参观飞翔勿扰博客站点侧边的一图三按钮效果,或见下图所示: 其实这个一图三按钮效果...

Google Map api国内正常使用该如何配置(2021最新)

最近有客户要求给他们网站做地图方面的功能,由于某些原因,网站必须使用google map,而且希望用到geocoding。大家知道google map api调用国内已经访问不了,虽然网上有很多教程,...

QQ装机必备合集包 2018.05.14

QQ装机必备合集包 2018.05.14

装机必备合集包产品简介: 装机必备合集包是为了方便广大网友更加快捷便利地推广产品和赚取积分而倾力打造的。集成了腾讯电脑管家、QQ浏览器等最赚钱计费产品以及微信PC版,QQ等装机必备软件。所有软件可以根...

评论列表

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

好吧 [face_16]

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

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

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

发表评论

访客

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