程序员的浪漫--console.log()在浏览器控制台输出特殊字符编码的图案
前言:520刚刚过去,不知道大家都做了什么浪漫的事情。下面介绍一种程序员的表白方式
最近在查看某些网站的,发现在浏览器的控制台会打印处理一些特殊的图案,比如知乎。那我们何不把这个换成我们喜欢人的照片。
在百度之后,发现打印这个是使用了console.log() 打印的,我查找了一下知乎网的这个console.log() 代码。
在https://static.zhihu.com/heifetz/main.app.93166c58a11467dddbfd.js 这个js中。
console.log("\n _____ _____ _____ _____ \n /\\ \\ /\\ \\ /\\ \\ /\\ \\ \n /::\\____\\ /::\\ \\ /::\\ \\ /::\\ \\ \n /:::/ / \\:::\\ \\ /::::\\ \\ /::::\\ \\ \n /:::/ / \\:::\\ \\ /::::::\\ \\ /::::::\\ \\ \n /:::/ / \\:::\\ \\ /:::/\\:::\\ \\ /:::/\\:::\\ \\ \n /:::/____/ \\:::\\ \\ /:::/__\\:::\\ \\ /:::/__\\:::\\ \\ \n /::::\\ \\ /::::\\ \\ /::::\\ \\:::\\ \\ /::::\\ \\:::\\ \\ \n /::::::\\ \\ _____ ____ /::::::\\ \\ /::::::\\ \\:::\\ \\ /::::::\\ \\:::\\ \\ \n /:::/\\:::\\ \\ /\\ \\ /\\ \\ /:::/\\:::\\ \\ /:::/\\:::\\ \\:::\\____\\ /:::/\\:::\\ \\:::\\ \\ \n/:::/ \\:::\\ /::\\____\\/::\\ \\/:::/ \\:::\\____\\/:::/ \\:::\\ \\:::| |/:::/__\\:::\\ \\:::\\____\\\n\\::/ \\:::\\ /:::/ /\\:::\\ /:::/ \\::/ /\\::/ |::::\\ /:::|____|\\:::\\ \\:::\\ \\::/ /\n \\/____/ \\:::\\/:::/ / \\:::\\/:::/ / \\/____/ \\/____|:::::\\/:::/ / \\:::\\ \\:::\\ \\/____/ \n \\::::::/ / \\::::::/ / |:::::::::/ / \\:::\\ \\:::\\ \\ \n \\::::/ / \\::::/____/ |::|\\::::/ / \\:::\\ \\:::\\____\\ \n /:::/ / \\:::\\ \\ |::| \\::/____/ \\:::\\ \\::/ / \n /:::/ / \\:::\\ \\ |::| ~| \\:::\\ \\/____/ \n /:::/ / \\:::\\ \\ |::| | \\:::\\ \\ \n /:::/ / \\:::\\____\\ \\::| | \\:::\\____\\ \n \\::/ / \\::/ / \\:| | \\::/ / \n \\/____/ \\/____/ \\|___| \\/____/ \n\n知乎(zhihu.com),招聘前端开发工程师 http://zhi.hu/BDXoD\n ")
1、开始制作我们自己的字符图案
参考网址:https://www.zhihu.com/question/26813467
https://aotu.io/notes/2016/06/22/An-interesting-experience-on-console/
https://www.cnblogs.com/Wayou/p/chrome_dev_tool_style_console.html
制作思路:找到一个我们喜欢图案,变成这样的字符形式,然后字符形式的图案的换行(\r\n)都去掉,换成 \n,这样就能正确的在console.log()中正确打印。
(1)将图案变成字符形式
进入这个网站:http://picascii.com/ 该网站支持将图片生成 字符图案。(当然也可以使用别的工具)
选择一张图片,可以设置大小和是否显示颜色。这个需要大家自己调调,找找合适的照片和大小。
这个是我的:
我们将 TEXT 中的内容复制出来。
(2)对生成的字符图案进行处理
工具:Notepad++
主要使用notepad++将生成text中的换行都置换。
参考网址:https://jingyan.baidu.com/article/922554464a2a26851648f408.html
先设置一下:
效果:就将换行符显示出来了
将\r\n 都替换成为 \n 需要两步:
打开替换界面(快捷方式:ctrl+H)
由于不能直接替换成\n,我们先替换成a,等会再替换\n.
你会发现整个text变成了一行,再次替换:
完成。
(3)设置到console.log() 中,看是否成功。
新建html
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"></head><script type="text/javascript">console.log(" ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,..` ```.```,,,,,.....``.```.``` ..` ` `` ` `````` \n +'+###############@@##############+###+##+'#+++'+':``.;++,.`;'+#,+'#;:.;;,``:.`,`.:.``,..``````````` \n #+++#############@@@#########+#+####@#####'+'+'++';```'+;:'`.#;';.,':,.';`.`.:.`.`.```,,.``````````` \n ################@###########++########+###+####+'+;,`.'`,,``.`;'.:.`+;.:;.,,,.```.:.``.````````````` \n ###############@#############+#########+#####+#+'+'.,:'.,..``...,'.`';,;;`,.,``````.``.,```````````` \n ############@@###############+#########+####++##+++,.,,:`,,`;,,..',.:';;:```````.``.``.,`````.`````` \n #############@##########################+###++++''+;.`,,:`,``:':,+...;.``````.``.`.`````..`````````` \n ######################################+##+###';#++'';,,,;.``.`::.:;:::.`````.````,,````````````````` \n #####################################++##++##+'#+'+'+:``,.``.`''`,':`,```.```.``.``.````.``.````.``` \n #######################################+##+###''+++++'.``.:```+;.`::`,.``,`````````,````````.``````` \n ######################################+####+##+''##+';:```.`.:;.`..:,,,.`````,`,:.````.``.``..`````` \n ########################################+#++##+''##+';;,`````;:.`..;.:,.```````,..`.,,....`.....```` \n #######################################++#####+:''#++;':`````.``;,,';;;,..,````..,,`,,,.`:````.````. \n ########@###############################+##+##+;';###';:,`````.;:;:''';,`.,,...,,..,.,..``,`.`...``. \n ########################################+#+####+';++++;;',```.,.;,:++;;';,..`,,..,,,,.,.`...`...`.`. \n ##########################################+####++;;#'';;',``.`.:;;,+:;;:,,:,..,..,...,,.,..`........ \n ##########################@@##############+####++''#+';:;,.`..:,#,:',.;;::,:.....,.,,............... \n ##########################################+###+#'''+#+';':,...`.':,::::::,:,,.,.,,,,..............,. \n #########################@###################+##++'+++'+'::,:.,.':,.,,,;:,;,,..,.,,.,.`........,,... \n +#########################@######################+;#'++;;;;::,,,::::,.:,,:::.,...,.,..`.``....,.,,., \n +#######################@#########################++'';;'+'+;;:::::,.,,,;;:;,,.,,,`...``.....,..,,,, \n ################@#######@########################+#+'+;+#++#''+';::...:;;;,,.,...,..,.````..`...,,,, \n #######################################+######+####+'+;+####+++'';;:,,,'::,.,........``.......,,,,,, \n ###############################++#####+;;;+#########'''+#######+++;;:,;,':,..,..``.`.```.`.`..,,,,,. \n ########++'++###+++#########+++++#####+';;'+++###+++#''##########+';::,,;,,.,..`````````..`....,,,,, \n #######';';;;'''''++++##++#'''''++#####+'';::++###'+#''############;::,,,,,....`.`.````````.`..,,.`. \n #######;;;;;;;;;;;''+++++'';;;''++#++++#+':::;;####+#''############+:::,.,,..`````````````...```,,.. \n ######+::;;;;;;;;;;'+'''';;;;;;''''''''''';::,:+###+''######+'+#####;:,,,,:,.``````````````.``.,,,,, \n ######;::::;;;+###+''''';;;;;;;'''';:::::;:::,,:###+';#++';;:::;+####:::,,,,,.```````````.....,,,,,, \n ######:::::'+##+'####+'';;::;;;''';:::,,,,::,,,,+##+';#+;::,,,,:;+###+:::,,:.````````````.....,,,,,, \n ######:::::;;:;;:+####';;::::;;''';::,,,,,,:,,,,;##+''+'':::,,,:;;'##+;;::,.````````````......,,,,,, \n ######:::,,:::::::'++#;;::,,::;'';;##@#',,:::,,,:##'+'+';;::::,::;;;#+';;;,..``````````......,,,,::: \n ######:,,,,,::::::;'';;::,,,,:;';+####+'+#,:,,,,:##++++'';;::::::::;+#++';,,.`.```````........,,,,,, \n ######:,,,,,,::::;;;:::::,,,,,:;;#'###:'+++;,,,,;##++#++';;::,,,::::;#++'':...```````````..`....,,,. \n ######:,,,,,,,,:::::,,:,,,,,,,:;;;;;;;:,,,,,,,,,'+++##+'';;;::,,,,,:;+++'+;,...```````.......,,,,,,, \n ######;,,,,,,,,,,,,,,,,,,,,,,,,::;;;;::,,,,.,,.,+#++##+'';;::::,;;:::'++++;.....`````...`..``.,.,,,, \n +#++++:,,,,,,,,,,,,,,,,,,,,,,,,,,::::::,,,.....,+++##+++';;;:;'+'';;:;+++';,...`````.`.``````````.,, \n ##+###;:,,,,,,,,,,,,,,,,,,,.,,,,,,,:::,,,.....,,++#####+'';;;;':::,,,:;++'',....```````````````````. \n ######;:,,,,,,,,,,,,:,,,,,,.,,,,,,,,,,,,,.....,,+######+';;;;;;::,,,,::'++;..````````````.``````.``` \n ######;:,,,,,,,,,::::,,,,,,..,,,,,,,,,,,,,,,,,,;#+###++++';;;;;;###+:,,:++;,.``````````.....`````.`` \n ######;:,,,,,,,,,:::::,,,,,..,,,,,,,,,,,,,,,,,,+####+++++';:;;;+##;:,,..:;:.```````````,,,,...`````` \n ######'::,,,,,::::;::,,,,,,..,,,:,,,,,,,,,,,,,,#######+++';,,;:;::,,,....':.``````````,,,,,``.``.``` \n ######'::::::::::;;;,,,,,,,,...,::,,,,,,,,,,,,,########++':,,,:::::,,,...;:.```````.`.,:,,.....````` \n ######':::::::::;;;:,,,,,:,,,...:::,,,,,,,,,,,,####+++++++;,,,,::::,,,...:;.`````````,,,,.```..`..`` \n ######+:::::::;;;;:::::::::;:,,,;:::,,,,,,,,,,;######++++';,,,,,,,,,,,,,.:',.....````..,..``.`.```.. \n ######+::::::;;;;::,:'+#''''+;::':::::::,,,,,,###++''''+++':,.,:::,,,,,..:'....`...``.......,,..``.. \n ######+::::::;:::::,:'++++++++;:;::::::::,,,,,###++'''''++;:,..:::,,,,,,.;;,,,,:,,,,.,,,,.......``.. \n #######;:::;;;::::::::;;'+++++':::::::::::,,,,###++''''++';:,,,.:::,,,,,,:',,,,,,,,..,,,,,:,,,.,,,,. \n ######++::;;;;:;;:::::::;''''::::::::;;;::,,,@####++'''++'';;:#;::::,,,,,':,,,.......,,,,,,,,..,,,,, \n ####+##+:::;::;';;:::,,:::::::::::::;;;;::,,,######+'''+####++;,,,,:::,,.'+;,.........,,..,...,,,,,, \n #+';::'+::::::;'##+;;;:,::::,,::;;;:;';;;::,########+'''''''::,,,,::,,,,,+';:........,,,,,.,........ \n ,,,,::,,,:::::;';;;;;+;;:;;;';:;'''';';;;:,,#@#######++++'';::,:,::;:,,,,##;;:``.,...,,,,,,,,....... \n ,,,,:,,,,,:;;;;;;::::,,;++++++#+##+';;';;:,@@@#########++++++'+++#'::,,,.##'',`````..,,,,,,,........ \n ,::,:,,,,,,;;;;;;::::::::,:,,,:;'+'';;;;;:@##@##@######++++';;:::,,,:,,,'##+;,..```````,,,,,.,...... \n ,,:,:,,,,,,:;;;;;:::;;;;::::;;;;;''';;;;:@##@@#:,,::+###'''';';:,:,,:::,###+',```.```````.,.,..`...` \n ,::,:,,,,,,:;;;;:;:::;''''++';;;;;''';;+#@@#@#+:,,,,::;#+''''''';:::'':+####'.``....```````...`````` \n ,:,:,:,,,,:::;;;:::::;;'++++';;;;;'';;'+#@#@@#'',,,,,::##''''';;;+####:######+',......`````````````` \n ::,:,:,,,,,:::;;;:::::;;'''';;;;;;';;;;####@#'''':,,,,,+#+''';::##############++#+####+'.````...`... \n ,,,,::,,,,,:::;;;;::::;;;;;;:;::;;;;,:;+####++''';,,,,,:+#''';;###++###########+#########+:```.....` \n ,:::,,:,,,,::::;;;;:;;;;;;';;:;;;;::,:;'#+####+++;:,,,,,;++';;####+#+'#+###################'```...., \n ,,,,:::,,,,:::::;'';;;'''''';;;;;:,:,::'+++##+'''':,,,.,:,##+###+++##+'#####################;``...,. \n ,,,::::,,,::::::;'''''''''''';;;:,,,,::+;++###+'''';,,.,:,,#####++####++';##################+.``:::: \n ,,,,,:::,,,::::::;''''''''''';;::,,,,:,':++####+#+++;,,,::;#######+####++'+#################+,``,,:, \n ,,,,:,::,,::::::::;'''''';;';;::,,,,,,,':++++##+';;;;:,,;@#######+######+++##################;```,,, \n ,,,,,::::,,:::::::;;'''''''';;:::,:,,,,',++++++#+'''''++#################+'@################++```,,, \n ,,,,:::::,,:::::::;;;'''''';;:::,,,,,::;,:''''+'#####@####################+#################++.``.,, \n :,,,:,::::,:::::::::;;'''';;;:::,,,,,,:;:,:;;;;;'''';####+#################+#################++.`.,, \n :,,,,::::::::::::::;;;;''';;;:::,:,,,,:;:,,::::::;;::;+'';#################+##################+'``., \n ;:,,,,:,:::::::::::;;;;;''';;:::,,,,,,:;:.,,,:::,:::::;;':+#################+##################+..`, \n ':,,,,;::::,::::::;;;;;;';;;;::,;,,,:,:;:,,,,,,,,,:::;;;;:+######@+###########@#################.``, \n ;::,,,:::::::::::::;:;;;;;;;::,,,,,,,,:;:,.,,,,,,:,:::;;;:+#####;..##########+@#################```, \n :;:,,,,;::::::::::::::;;;;;;::,;,,,,:,,;::.,,,,,,,,,:::::;#'##@..,,.##########+######@##########.``. \n :;:,,,,':::::,:::::::::::;:::,,,,,,::,,:::,,,,,,,,,,,:,:,':;#;,,,,...#########+#################.``` \n :::,,,,::,:,:,,:::::::::::::,,:,,,,;,,,:::,.,,,,,,,,,:,:,;:::,,,,,,..'#########+####@###########..`` \n ::;:,,,:;:,:,:,,,,:::::::::,,,,,,,,:,,,,::,.,,,,,,,,,:,:,::::;,,,,,...##########################.``` \n \n");</script><body></body>
</html>
在浏览器打开,查看浏览器控制台:
大功告成。
(4)后话
console.log() 还能打印有颜色的字符和图片,大家可以试试。 可以试试打印一个彩色的字符图案会更加好看。由于这里我没有尝试,就先到这里。等我尝试后,会再发出来一篇文章。
程序员的浪漫--console.log()在浏览器控制台输出特殊字符编码的图案相关推荐
- 七夕专属程序员的浪漫
七夕节,又称七巧节.七姐节.女儿节.乞巧节.七娘会.七夕祭.牛公牛婆日.巧夕等,是中国民间的传统节日.七夕节由星宿崇拜衍化而来,为传统意义上的七姐诞,因拜祭"七姐"活动在七月七晩上 ...
- 专属程序员的浪漫七夕
七夕来袭!是时候展现专属于程序员的浪漫了!你打算怎么给心爱的人表达爱意?鲜花礼物?代码表白?还是创意DIY? 七夕节,又称七巧节.七姐节.女儿节.乞巧节.七娘会.七夕祭.牛公牛婆日.巧夕等,是中国民间 ...
- 七夕到了——属于程序员的浪漫
七夕节,又称七巧节.七姐节.女儿节.乞巧节.七娘会.七夕祭.牛公牛婆日.巧夕等,是中国民间的传统节日.七夕节由星宿崇拜衍化而来,为传统意义上的七姐诞,因拜祭"七姐"活动在七月七晩上 ...
- python浪漫代码-使用Python代码的程序员也浪漫
原标题:使用Python代码的程序员也浪漫 代码也浪漫:用Python放一场圣诞节烟花秀! 天天敲代码的朋友,有没有想过代码也可以变得很酷炫又浪漫?今天就教大家用Python模拟出绽放的烟花庆祝昨晚法 ...
- 520程序员的浪漫表白
520程序员的浪漫表白 说明 预览 html部份代码 说明 本文作品创意不是我想出来的,只是想用推荐卡在这"520"的节日里给更多的人分享下好的作品,可以让新人程序员更加热爱现在做 ...
- HTML5纯css实现爱心动画效果DW、vscode来自程序员的浪漫表白
HTML5纯css实现爱心动画效果DW来自程序员的浪漫表白 一.拉面版 css部分 *{/* 初始化页面元素内外边距*/margin:0;padding: 0;}body{/* 弹性布局元素垂直水平居 ...
- 前端程序员的浪漫动态告白表白女友源码
动态告白表白女友源码前端程序员的浪漫,是一款网页动态表白源码,直接点击html看效果,浏览器打开就好了,兄弟们可以上车了. 特别说明: 1.文字在 take.js 里面改 或者 index.html里 ...
- 520表白特辑-程序员的浪漫
又到了一年一度的520了,单身的小哥哥们准备好向心仪的小姐姐表白了吗? 今天我们用属于程序员的浪漫来向心中的那个完美女生表白~ 上效果~ 程序员的浪漫 那么如何实现这个效果呢?三步走~ 1. 第一步, ...
- java程序员用代码写的情书_用代码写的三行情诗,你懂得程序员的浪漫吗?
原标题:用代码写的三行情诗,你懂得程序员的浪漫吗? 在一般人眼里,程序员是一群古板,技术宅,不懂得浪漫的屌丝,但其实这些大神们浪漫起来也是相当可以的!下面让我们来看一下程序员们用代码写的三行情诗 1. ...
最新文章
- liferay中使用自己的数据库
- 5MB的神经网络也高效,Facebook新压缩算法造福嵌入式设备
- 对抽象工厂+反射+配置文件的实例理解
- Json对象与Json字符串互转(4种转换方式)
- windows c语言 pipe,pipe 函数 (C语言)
- Linux系统下,MySQL以及禅道的安装/卸载
- new file会创建文件吗_Rust 文件系统处理之文件读写 Rust 实践指南
- 大数据平台不是救世主!做好数字化转型,得先解决这一问题
- 怎么把照片做成消消乐_开心消消乐特效怎么制作 制造的几种方式分享
- Python之函数进阶
- STM32工作笔记0083---UCOSIII中断和时间管理
- ubuntu默认播放器缺少解码器
- 微软的teredo服务器,win10系统通过teredo连接ipv6的具体教程
- TSX常见简单用法(入门) Vue3+Vite
- Xposed 模块开发入门
- 小米 oj 22 题 找到第 N 个数字
- java 线程与线程池详解
- Android常用控件有哪些?如何使用?
- java记录-String、StringBuilder和StringBuffer
- currentTimeMillis()的解释