前端的console.log的效果写法
不说废话，直接上代码：
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title></title>
</head> <body> </body>
<script>
// 清空控制台
console.clear();
// 普通的例子（输出黑色的字体-变大）
console.log("%cHelloWorld", "font-size:20pt");
// 普通的例子（实现颜色控制）
console.log("%cHelloWorld %cHelloWorld %cHelloWorld", "color:red", "color:green", "color:orange;font-weight:bold");
// 普通的例子（阴影效果）
console.log("%cHelloWorld", "text-shadow: 3px 1px 1px grey");
// 普通的例子（彩色字体）
console.log('%cHelloWorld', '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;');
// 例子（带背景的字体）
console.log("%cHelloWorld", "background: rgba(252,234,187,1);background: -moz-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%,rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);background: -webkit-gradient(left top, right top, color-stop(0%, rgba(252,234,187,1)), color-stop(12%, rgba(175,250,77,1)), color-stop(28%, rgba(0,247,49,1)), color-stop(39%, rgba(0,210,247,1)), color-stop(51%, rgba(0,189,247,1)), color-stop(64%, rgba(133,108,217,1)), color-stop(78%, rgba(177,0,247,1)), color-stop(87%, rgba(247,0,189,1)), color-stop(100%, rgba(245,22,52,1)));background: -webkit-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);background: -o-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);background: -ms-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);background: linear-gradient(to right, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#f51634', GradientType=1 );font-size:5em");
// 例子（带背景图片的例子）
console.log("%c", "padding:50px 300px;line-height:120px;background:url('http://newimg88.b0.upaiyun.com/newimg88/2014/03/jquery.png') no-repeat;");
// 例子（二级菜单效果）
console.groupCollapsed('%cHelloWorld', 'color:#009a61; font-size: 28px; font-weight: 300');
console.log("%c%c网站名称%cHelloWorld", "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网站地址%cHelloWorld", "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.groupEnd(); // 结束标记
// 例子（程序员专用BUG）
console.log([
" _ooOoo_",
" o8888888o",
" 88\" . \"88",
" (| -_- |)",
" O\\ = /O",
" ____/`---'\\____",
" .' \\\\| |// `.",
" / \\\\||| : |||// \\",
" / _||||| -:- |||||- \\",
" | | \\\\\\ - /// | |",
" | \\_| ''\\---/'' | |",
" \\ .-\\__ `-` ___/-. /",
" ___`. .' /--.--\\ `. . __",
" .\"\" '< `.___\\_<|>_/___.' >'\"\".",
" | | : `- \\`.;`\\ _ /`;.`/ - ` : | |",
" \\ \\ `-. \\_ __\\ /__ _/ .-` / /",
"======`-.____`-.___\\_____/___.-`____.-'======",
" `=---='",
"^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^",
" 佛祖保佑 永无BUG"
].join('\n'));
</script> </html>
效果是：
前端的console.log的效果写法的更多相关文章
- 前端不为人知的一面--前端冷知识集锦 前端已经被玩儿坏了！像console.log()可以向控制台输出图片
前端已经被玩儿坏了!像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Quora上一个帖子,瞬间又GET了好多前 ...
- 推荐前端开发手机调试打印神器console.log()
下面说的这个插件很牛,相信很多人都不知道,但找问题的时候很需要,直接上干货如下: vConsole:一个轻量.可拓展.针对手机网页的前端开发者调试面板. 下载 vConsole 的最新版本.(不要直接 ...
- JS之console.log详解以及兄弟姐们邻居方法扩展
console.log() 基本用法 console.log,前端常用它来调试分析代码,你可以在任何的js代码中调用console.log(),然后你就可以在浏览器控制台看到你刚才打印的常量,变量,数 ...
- 网页console console.log 用法 Chrome F12
#########sample 0 https://www.cnblogs.com/xiaozong/p/4961929.html https://blog.csdn.net/shanliangliu ...
- 简述alert和console.log的区别
生活中还是得有发现美好和差别的眼睛~~ 学习前端那么久既然还不知道alert和console.log的差别~~~~ 蓝瘦,香菇~~~ 本菜鸟一直以为alert和console.log其实是一样的用法, ...
- 有趣的console.log（console.log输出彩色字，图片等）
亲们支持我的新博客哦==>原文地址 ) 逛网站的时候经常发现很多网站控制台打印了很好玩的内容 比如我的网站 →calamus 或者知乎→ 平时是不是只用console调试或者打印别的信息了,没有 ...
- javascript精雕细琢（四）：认亲大戏——通过console.log彻底搞清this
目录 引言 代码在前 1.function下的this 2.箭头函数下的this 结语 引言 JS中的this指向一直是个老生常谈,但是新手又容易晕的地方.我在网上浏览了很多帖子,但是发 ...
- [技巧篇]13.从今天开始做一个有理想的人，放弃alter的调试，拥抱console.log
在js前端开发时,为了调试经常会加上 console.log.但是在有的浏览器(比如IE)中会报错,怎么办呢?好像10之后也开始支持了!如果以防方一,可以使用如下方式 在js文件最前面添加如下js代码 ...
- console.log("A"-"B"+"3")=？
(点击上方的订阅号,可快速关注,关注有惊喜哦^_^) 前不久看到一道JS基础题目,做了一下竟然错了一半...在此分享一下: 先把题目放上来,大家可以自己测试一下再看答案哦^_^ ①console.lo ...
随机推荐
- Android Finalizing a Cursor that has not been deactivated or closed
问题描述: 使用Sqlite数据库时,有时候会报下面的异常: Finalizing a Cursor that has not been deactivated or closed 一个光标没有被停用 ...
- where条件顺序与建索引顺序
查询时,如果数据量很大,where 后面的条件与建索引的顺序相同,也没有什么多少差别,聚集索引稍微快点; 但where 后面的条件与建索引顺序不同,速度会慢下来,到底慢多少,不同的机器会不一样,没有绝 ...
- HDU 1257 最少拦截系统【最长上升子序列】
解题思路:可以转化为求最长上升子序列来做,还是可以用an与按升序排列后的an求LCS来做,为防止超时,用滚动数组优化一下就可以了. 最少拦截系统 Time Limit: 2000/1000 MS (J ...
- ZBrush通过显示与隐藏得到子物体
在ZBrush®中得到子物体的方法有很多,本文将为大家介绍一种新的创建子物体的方法,通过显示和隐藏得到子物. ZBrush 4R8中文版下载:http://wm.makeding.com/iclk/? ...
- 执行python manage.py makemigrations时报错TypeError: __init__() missing 1 required positional argument: 'on_delete'
在执行python manage.py makemigrations时报错: TypeError: __init__() missing 1 required positional argument: ...
- jupyter的安装
3.6:\Lib\site-packages\pip\models\index.py # PyPI = Index('https://pypi.python.org/') # 替换成 PyPI = I ...
- [CTSC1999][网络流24题]家园
题目:洛谷P2754. 题目大意:有$n$个空间站,$m$个飞船,每个飞船有各自的停靠站点,并且从第一个停靠站点开始,不断循环.每个飞船有不同的容量(-1为月球,0为地球).每个飞船初始停在第一个停靠 ...
- oracle11.2静默安装
操作系统及Oracle版本 Linux版本:rhel-server-5.8-x86_64-dvd Oracle版本:Oracle Database 11g Release 2 (11.2.0.4.0) ...
- python_三级字典
data = { "北京":{ "昌平":{ "沙河":["oldboy","test"], &qu ...
- nginx虚拟主机的配置不生效
这个坑找了好久,今天终于找到了问题所在. 一般虚拟主机配置文件是vhost里面单独写一个网站名.conf,然后在nginx最后include vhosts/*.conf 引用. 但是我这里的vhost ...