5分钟教你使用console.log发布公司的招聘信息

徐小夕 等级 583 0 0

前言

我们在打开百度或者知乎等网站查看源代码时,在控制台往往会看到如下图所示的信息: 5分钟教你使用console.log发布公司的招聘信息

5分钟教你使用console.log发布公司的招聘信息

通过这种方式来帮助公司做招聘,是不是很有创意呢?一方面可以体现出这些公司对人才的渴望,另一方面也可以让开发者们直接接触招聘信息,更加高效的找到对公司感兴趣的求职者。

接下来就让来看看这些是如何实现的吧。

正文

1. 基本的文字编排信息输出

console.log作为javascript的全局方法之一,也支持输出带有格式和样式的字符,比如我们使用/n进行换行,使用css样式为指定文本编写样式,如下:

if (window.console) {
    console.log('想和我们共同打造世界最大中文互动问答平台吗?\n想让自己的成就在亿万用户面前展现吗?想让世界看得你的光芒吗?\n加入我们,在这里不仅是工作,投入你的时间和热情,滴滴汗水终会汇聚成不平凡的成果。\n期待你的加盟。');
    console.log("公司诚聘前端工程师,%c简历投递地址http://www.badu.toudi.com", "color:blue;font-weight:bold;");
    console.log("请在邮件中注明%c来自:console", "color:red;font-weight:bold;");
}

以上%c后面的本将用console.log的第二个参数制定的样式来输出,效果如下: 5分钟教你使用console.log发布公司的招聘信息 我们可以利用这些方式实现更加有创意的控制台信息,包括公司的宣传画,招聘贴等。

2. 在控制台打印字符画

正如上文所展示的控制台知乎招聘贴,我们也可以为自己的网站定制招聘宣传贴。关于字符画的编写,我们可以一行行在控制台敲,当然这种方式不建议采用,我们可以使用网站http://patorjk.com/来生成自己的字符画,然后在通过代码包装输出到控制台。 5分钟教你使用console.log发布公司的招聘信息 以上就是该网站的界面,我们只需要输入想要转化成字符画的英文字符,就可以生成不同样式风格的字符画。以下是HIRE的不同风格的字符画: 5分钟教你使用console.log发布公司的招聘信息 5分钟教你使用console.log发布公司的招聘信息 5分钟教你使用console.log发布公司的招聘信息 5分钟教你使用console.log发布公司的招聘信息 5分钟教你使用console.log发布公司的招聘信息 当然这只是网站生成的一部分,该网站一共为HIRE生成了314中不同风格的字符画,是不是很强大呢?当然我们单纯只复制这些字符是远远不够的,我们还需要用函数包转一下,才能原样输出到控制台。具体实现代码如下:

<script>
    Function.prototype.makeMulti = function () {
        let l = new String(this)
        l = l.substring(l.indexOf("/*") + 3, l.lastIndexOf("*/"))
        return l
    }

    let string = function () {
      /* 你复制的字符图案 */
    }
    console.log(string.makeMulti());
    console.log(/* 其他信息 */);
</script>

我们将上面从网站生成的字符画复制到string函数中,执行代码后效果如下: 5分钟教你使用console.log发布公司的招聘信息 当然我们可以继续扩展该函数,支持输出彩色字符画等功能,大家感兴趣可以探索一下。

最后

如果想学习更多H5游戏, webpacknodegulpcss3javascriptnodeJScanvas数据可视化等前端知识和实战,欢迎在《趣谈前端》加入我们的技术群一起学习讨论,共同探索前端的边界。

更多推荐

收藏
评论区

相关推荐

ES6之set
const snew Set(); 2,3,4,2,3,4,5,6,2,3,3.forEach(xs.add(x)) console.log(s); for(let i of s){ console.log(i) } console.log(s.add(9)); //add(value),添加某个值,返回Set结构本身 console.log(s.d
js 基础之弱类型/变量提升/TDZ/块作用域/重复定义/Object.freeze()
弱类型 在JS中变量类型由所引用的值决定 var web "helloWorld"; console.log(typeof web); //string web 99; console.log(typeof web); //number web {}; console.log(typeof web); //object 变量提升
浅谈promise和js执行机制(二)
让我们继续上一次遗留的问题: setTimeout(function(){ console.log('1') }); new Promise(function(resolve){ console.log('2'); resolve(); }).then(function(){ console.log('3') }); conso
JS中的按位非(~)的使用技巧
### 按位非 按位非操作符由一个波浪线(~)表示,执行按位非的结果就是返回数值的反码 现在让我来看几个例子 例子1 console.log(4); console.log(~4); console.log(~~4); ![](https://oscimg.oschina.net/oscnet/6d8dbec0d4685dd
18 个 JavaScript 入门技巧!(含2020JavaScript面试题整理)
1\. 转字符串 -------- const input = 123; console.log(input + ''); // '123' console.log(String(input)); // '123' console.log(input.toString()); // '123'
ES6 for in与for of 的使用方法及其区别
   **// for in遍历的是数组的索引(即键名),而for of遍历的是数组元素值。**  let arr = \[1,2,3,4,5,6,7\]     for(let index of arr){      //   console.log(index)//1 2 3 4 5 6 7     }     for(let index in
IE9 console.log兼容性问题
### 问题描述 昨天测试开始测试IE9兼容问题,突然提出很多  **偶尔**点击某个按钮无响应的bug。 ### 排查思路 本来初步怀疑是IE9判定两次请求为重复请求 故不走网络导致的。但是经过排查实验  加上timestamp时间戳还是偶尔出现这样的bug。因此不得不在页面初步添加alert弹窗,方便监听到底哪一步出现了问题。最后发现alert走到
JS关于Array的方法介绍
* Array.length:数组的一条属性。基本用法: let array = [1,2,3,4,5]; console.log(array.length);//5 * Array.prototype:数组原型 console.log(Array.prototype);//Object * Array.isArr
JavaScript中相等判断和全等判断
引申:1.var a =\[0\]   if(a) console.log(a==true)  ; a=\[2\];a==true;  //打印结果为false        2.  var b = 2 ;if(b) console.log(b==true)   // 打印结果为false  一下表格反应了当进行A==B判断是进行的操作,一下内容来自[h
JavaScript同步、异步及事件循环
同步、异步 ----- JS是单线程的,每次只能做一件事情。像以下这种情况,代码会按顺序执行,这个就叫同步。 console.log(1); console.log(2); console.log(3); 以下代码会输出2、3、1,像这种不按顺序执行的,或者说代码执行中间有时间间隙的,叫异步。 setTimeout((
Js四则运算精度问题处理
JavaScript小数在做四则运算时,精度会丢失,这会在项目中引起诸多不便。先看个具体的例子: //较小的数运算 console.log(0.09999999 + 0.00000001); //0.09999999999999999 console.log(-0.09999999 - 0.00000001); //-0.09
Promise在await报错后,如何继续往下跑...
 一、resolve ---------- 当a>0时,正常情况依次输出A、B、C console.log("A"); let result = await this.test(); console.log("C:",result); private test(){ return new Pr
Socket.IO连接异常时的内置事件流程图
参考Soket.IO官方文档:https://socket.io/docs/client-api/,客户端内置事件一共有10种,测试代码如下: socket.on('connect', function(data){     onlineFlag = true;     console.log(data + ' - connect'); });