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

时间 2020-03-24

标签 5分使用 console.log console log 发布公司招聘信息繁體版

原文原文链接

前言

咱们在打开百度或者知乎等网站查看源代码时，在控制台每每会看到以下图所示的信息： javascript

经过这种方式来帮助公司作招聘，是否是颇有创意呢？一方面能够体现出这些公司对人才的渴望，另外一方面也可让开发者们直接接触招聘信息，更加高效的找到对公司感兴趣的求职者。css

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

正文

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

console.log做为javascript的全局方法之一，也支持输出带有格式和样式的字符，好比咱们使用/n进行换行，使用css样式为指定文本编写样式，以下：vue

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的第二个参数制定的样式来输出，效果以下： java

咱们能够利用这些方式实现更加有创意的控制台信息，包括公司的宣传画，招聘贴等。

2. 在控制台打印字符画

正如上文所展现的控制台知乎招聘贴，咱们也能够为本身的网站定制招聘宣传贴。关于字符画的编写，咱们能够一行行在控制台敲，固然这种方式不建议采用，咱们可使用网站patorjk.com/来生成本身的字符画，而后在经过代码包装输出到控制台。 node

以上就是该网站的界面，咱们只须要输入想要转化成字符画的英文字符，就能够生成不一样样式风格的字符画。如下是 HIRE的不一样风格的字符画：

固然这只是网站生成的一部分，该网站一共为 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函数中，执行代码后效果以下： webpack

固然咱们能够继续扩展该函数，支持输出彩色字符画等功能，你们感兴趣能够探索一下。

最后

若是想学习更多H5游戏, webpack，node，gulp，css3，javascript，nodeJS，canvas数据可视化等前端知识和实战，欢迎在公号《趣谈前端》加入咱们的技术群一块儿学习讨论，共同探索前端的边界。 css3

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

前言

正文

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

2. 在控制台打印字符画

最后

更多推荐