Console美化,在浏览器控制台添加网站说明

2021-05-08 0 431

  让喜欢按F12的访客不至于看到空空的控制台,console打印的文字是可以添加样式的,不过不是全部css效果都有效,这里只介绍一小部分样式。

Console美化,在浏览器控制台添加网站说明

\n是换行,可以将一个字符串设置成多行
%c标记之后的内容使用对应样式,格式如 console.log(‘%c第一个样式%c第二个样式’,’css1′,’css2′); 如此对应
样式和普通的css效果基本一致,可以设置文字颜色,背景颜色,字体大小,间距,边距等等。还支持部分css3高级效果。
甚至还支持输出图片,不过我怎么都没有弄出来。。。
代码如下:

/*
* 控制台
*/
$(function () {
    console.log("%c%c博客名称%cAE博客", "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.aeink.com", "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企鹅号码%c774740085", "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;");
  
});


收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

捷丰下载 技术教程 Console美化,在浏览器控制台添加网站说明 https://www.nwgamer.com/322.html

常见问题

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务