console.log()花式玩法

2020 年 12 月 17 日

1642 次浏览

1936字数

附上代码：

console.log(`%c                                                                            
                               %c FBI WARNING %c                                
%c        Federal Law provides severe civil and criminal penalties for        
        the unauthorized reproduction,distribution, or exhibition of        
         copyrighted motion pictures (Title 17, United States Code,         
        Sections 501 and 508). The Federal Bureau of Investigation          
         investigates allegations of criminal copyright infringement        
                 (Title 17, United States Code, Section 506).               `,
    'background: #000; font-size: 18px; font-family: monospace',
    'background: #f33; font-size: 18px; font-family: monospace; color: #eee; text-shadow:0 0 1px #fff',
    'background: #000; font-size: 18px; font-family: monospace',
    'background: #000; font-size: 18px; font-family: monospace; color: #ddd; text-shadow:0 0 2px #fff'
    )

为什么会这样呢？想必你还记得其他语言中的print()。占位符是print()的专属吗？不，他们在console.log()中同样适用：

%s：字符串
%d：整数
%i：整数
%f：浮点数
%o：obj对象（DOM）
%O：obj对象
%c：CSS样式

console.log()可以通过以上这些特有的占位符进行信息的加工输出。是的，你可能已经明白，上面代码的玄机就在四个%c，

第一个创建神秘而性感的纯黑背景；

第二个给“FBI WARNING”加上红色的背景；

第三个恢复纯黑的性感；

第四个配上白色的文字，如此，大事已成。

明白了以上原理，诸君就可以自由发挥，展示你们强大的css实力了，甚至还可以输出gif背景图
如：

console.log(`%c你好，亲爱的朋友，
我是墨少离，
这是我的一个小博客，
如果您喜欢请收藏一下谢谢~
如果有存在侵权的，请发邮件至wtxly521@94qy.com，谢谢`,'font-size: 20px; color: orange;')
console.log('%c                                                          ',
'font-size: 100px;background: url("https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=167741595,2706197548&fm=26&gp=0.jpg"); background-size: 100%;')

效果如下：

console.log()花式玩法