程序员的浪漫--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() 还能打印有颜色的字符和图片,大家可以试试。 可以试试打印一个彩色的字符图案会更加好看。由于这里我没有尝试,就先到这里。等我尝试后,会再发出来一篇文章。




### 回答1: libconio-1.0.0.tar.gz是一个开源项目的压缩包,其中包含了一个名为libconio的C语言库。这个库提供了一些常见的控制台输入输出功能,例如在控制台输出文本、获取用户输入等等。使用这个库可以简化编写控制台程序的过程,提高效率和开发效果。此外,该库还允许用户控制屏幕光标的位置,显示不同的颜色和字符等。 总之,libconio-1.0.0.tar.gz是一个非常实用的库,适用于许多需要使用控制台界面的应用程序,例如游戏、命令行工具等等。同时,由于它是一个开源项目,用户可以随意使用和修改它,以适应自己的需求。 ### 回答2: libconio-1.0.0.tar.gz是一个开源的C语言库文件,主要用于控制台程序的输入输出操作。该库文件封装了一系列控制台窗口的函数,使得开发控制台程序更方便、快捷和高效。 使用libconio库文件,可以在控制台中实现诸如光标位置的移动、字符颜色的改变、屏幕清除、按键捕捉等功能。这些操作在传统的C语言编程中需要使用大量的系统调用或者操作系统API才能实现,而使用libconio库文件,这些操作只需要一两行简单的代码即可完成。 libconio-1.0.0.tar.gz文件是一个压缩文件,其中包含了libconio库的源代码和编译脚本等文件。使用该文件需要先解压缩,然后根据平台环境进行编译和安装。在安装成功后,就可以在编写C语言控制台程序时使用libconio库了。 总之,libconio-1.0.0.tar.gz是一个非常实用的C语言库文件,适用于控制台编程的程序员们。它可以大大提高代码编写的效率和质量,同时也便于开发者进行控制台程序的调试和测试。 ### 回答3: libconio-1.0.0.tar.gz 是一个 C 语言库文件,用于在控制台窗口中进行输入输出操作。它提供了一系列与控制台交互的函数,以便程序员能够快速地实现控制台界面设计。该库文件可以在 Linux 和 Windows 操作系统上进行使用。 该库文件的使用方法比较简单,只需要在程序中引用头文件即可使用其中的函数。例如,可以通过使用 conio.h 头文件来引用库文件中的函数。使用该库文件可以实现许多常见的控制台操作,例如屏幕清除、颜色设置、光标控制、键盘输入检测等等。 虽然在当今的编程环境中,控制台很少用于用户交互界面的设计,但是在一些特定的场合下,控制台界面仍然是非常有用的。例如,在调试和测试过程中,控制台可以提供一个简单、高效的测试界面。 总之,libconio-1.0.0.tar.gz 是一款实用的 C 语言库文件,它为控制台编程提供了许多方便的功能,可以为一些特定的编程场合提供高效的程序设计方案。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值