认识一下控制台(console)

知道的可直接跳过

首先要来认识一下控制台(console),控制台其实就是一个用于调试网页的工具。在控制台输出内容的代码是:

1
2
3
4
5
6
//控制台日志
console.log("要输出的内容")
//控制台警告
console.warn("要输出的内容")
//控制台错误
console.error("要输出的内容")

但是这些代码要写在哪里呢?

首先要新建一个HTML文件

然后把Javascript(js)的代码写在script标签里面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<!--Javascript(js)代码必须写在script标签里面-->
<script>
//控制台日志
console.log("要输出的内容");
//控制台警告
console.warn("要输出的内容");
//控制台错误
console.error("要输出的内容");
</script>
<body>
</body>
</html>

那么怎么查看输出的内容呢?

在浏览器端,按下F12 可以打开浏览器的console窗口,查看即可。

这是输出的效果:avatar

如何输出字符画

1、开始制作我们自己的字符图案

假如是图片转字符的话就用这个网站

图片转字符

如果是文字转字符的话就用这个

文字转字符

因为文字转字符的网站是英文的所以我来讲一下

第一步:点击text的输入框,输入你要转换的文字

第二步:在font框里选择一个你想要的样式(随便选个)

第三步:点击”Do it”按钮,等一会,然后复制下面白色框里的字符。

完成!

2、对生成的字符图案进行处理

假如把刚刚复制的内容直接粘贴到console.log里的话就会报错所以我们要把它处理一下!

工具:Notepad++ 如果没有,点击这里下载

参考网址:https://jingyan.baidu.com/article/922554464a2a26851648f408.html

第一步:打开Notepad++,粘贴刚才复制的内容

第二步:设置一下,把圈住的都选上

avatar

这样换行符就可以显示出来了!

第三步:打开替换界面(快捷方式:ctrl+H)

第四步:要先把所有的换行符先替换成a;全部按照图片的来设置好了后点击全部替换:avatar

第五步:你会发现所有的字符变成了一行,再把所有的a替换成\n。

按照图片的来设置好了后点击全部替换:

avatar

3、输出处理好的字符画

全选处理好的字符画,并复制

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<!--Javascript(js)代码必须写在script标签里面-->
<script>
//控制台日志
console.log("粘贴");
</script>
<body>
</body>
</html>

粘贴在上面代码中的”粘贴”的位置即可(不要把双引号删掉)

好了,大功告成!

avatar

这篇教程俺写了一个小时,转发支持一下呗!