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. 在控制檯打印字符畫

最後

更多推薦