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()黄色警告提示

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏儿童编程

用Python写书法作品,WOW!

今天尝试了用Python代码完成书法作品(包括印章制作和书法写字)。发现了编程与艺术又一个契合点,小开心一下。其实这个过程非常简单。我们先看作品,后讲解代码。

6094
来自专栏iKcamp

追溯 React Hot Loader 的实现

文:萝卜(沪江金融前端开发工程师) 本文原创,转载请注明作者及出处 如果你使用 React ,你可以在各个工程里面看到 Dan Abramov 的身影。他于...

47514
来自专栏hightopo

原 基于 HTML5 WebGL 的 3D

2936
来自专栏编程直播室

WebGL 动画

1874
来自专栏谦谦君子修罗刀

react-native-swiper组件-横扫你的轮播图

一念起,万水千山。一念灭,沧海桑田。 许久不曾召幸React Native爱妃,未曾想一见竟让寡人目瞪口呆。啥~~~你就说你买包包的速度能跟上你版本迭代更新的...

6146
来自专栏数据小魔方

符号的艺术

今天跟大家聊聊ppt中的符号艺术——项目符号! ▼▼▼ 大家在word排版过程中,如果内容很长并且逻辑性很强的话,都会下意识的使用项目符号,使得文章结构分明,逻...

3805
来自专栏前端架构与工程

浅谈事件冒泡

前端开发中不可避免会接触到事件冒泡,今天简单记录一下处理事件冒泡的一点经验,谈不上心得,聊当抛砖引玉。 不谈移动端,以PC浏览器的click事件为例。 事件冒泡...

1859
来自专栏拂晓风起

Cocos2d-js 3.0 颜色变换(调整sprite/图片的色调)

1472
来自专栏进击的君君的前端之路

ReactJS简介

1824
来自专栏熊二哥

React快速入门

正好旁边前端的兄弟最近在学习React,为了更深入的了解前端的业态,也果断来学习一发,目标是有个基础的了解,需要时能快速上手就OK,说实话,个人并不是很喜欢它的...

2228

扫码关注云+社区

领取腾讯云代金券