console.log新玩法

console.log支持多样化玩法,这里以console.log的css内容输出为例,也就是console.log()输入多样化内容

1. console.log输出一张图片
   • 正常情况下大家都应该明白console.log只能输出正常的文本内容
   • 这里给大家介绍输出一张图片,把下面的代码放进JavaScript脚本里面就可以实现控制台输出一张图片
   • console.log('%c','padding:50px 200px;background:url(" https://i.niupic.com/images/2018/05/20/5r4h.jpg ")')
   • 效果图

     

2. console.log输出背景渐变的文字
3.  console.log("%c十月梦想","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输出彩色(渐变文字)chrome控制台不支持显示

console.log('%c十月梦想 ', '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;')

效果图: chrome下状态(不显示):

firefox(完美支持):

console.log输入3D(立体)文字

console.log('%c十月梦想',"text-shadow:8px 5px 5px rgba(0,0,0,.15),6px 3px 2px rgba(0,0,0,0.3),3px 4px 3px rgba(0,0,0,.2);4px 2px 5px rgba(0,0,0,0.4);padding:30px 15px;color:purple;font-size:8em");

其实就是给文本设置四个文本阴影,设置一个是平面效果,多个文本阴影则出现立体效果

效果图:

console打印出当前页面的xml结构

console.dirxml(document.body)

效果图:

console的用法另外补充

• console.log("%c")输出css样式
• console.log("%s") 字符串格式化
• %d/%i 整数格式化；
• console.log("%o") 可扩展的DOM节点格式化
• console.log("%O") 可扩展的JavaScript对象格式化
• console.error('')错误红色报错信息
• console.info()普通信息提示(黑色默认)
• console.warn()黄色警告提示