1. 程式人生 > 實用技巧 >【js】知乎chrome控制檯字元畫招聘資訊實現

【js】知乎chrome控制檯字元畫招聘資訊實現

知乎主頁使用chrome控制檯開啟可以看到如下的招聘資訊,我們也來做一個

知乎控制檯

Step1:獲取字元畫:

去這個網站Text to ASCII獲得你想展示的字元,複製下來

Step2: 在js裡寫一個函式

    Function.prototype.getMultiLine = function () {
            var lines = new String(this);
            lines = lines.substring(lines.indexOf("/*") + 3, lines.lastIndexOf("*/"));
            
return lines; }

Step3: 定義一個變數,將字元貼上進來

var string = function () {
/*
          _____                   _____                   _____                   _____          
         /\    \                 /\    \                 /\    \                 /\    \         
        /::\____\               /::\    \               /::\    \               /::\    \        
       /:::/    /               \:::\    \             /::::\    \             /::::\    \       
      /:::/    /                 \:::\    \           /::::::\    \           /::::::\    \      
     /:::/    /                   \:::\    \         /:::/\:::\    \         /:::/\:::\    \     
    /:::/____/                     \:::\    \       /:::/__\:::\    \       /:::/__\:::\    \    
   /::::\    \                     /::::\    \     /::::\   \:::\    \     /::::\   \:::\    \   
  /::::::\    \   _____   ____    /::::::\    \   /::::::\   \:::\    \   /::::::\   \:::\    \  
 /:::/\:::\    \ /\    \ /\   \  /:::/\:::\    \ /:::/\:::\   \:::\____\ /:::/\:::\   \:::\    \ 
/:::/  \:::\    /::\____/::\   \/:::/  \:::\____/:::/  \:::\   \:::|    /:::/__\:::\   \:::\____\
\::/    \:::\  /:::/    \:::\  /:::/    \::/    \::/   |::::\  /:::|____\:::\   \:::\   \::/    /
 \/____/ \:::\/:::/    / \:::\/:::/    / \/____/ \/____|:::::\/:::/    / \:::\   \:::\   \/____/ 
          \::::::/    /   \::::::/    /                |:::::::::/    /   \:::\   \:::\    \     
           \::::/    /     \::::/____/                 |::|\::::/    /     \:::\   \:::\____\    
           /:::/    /       \:::\    \                 |::| \::/____/       \:::\   \::/    /    
          /:::/    /         \:::\    \                |::|  ~|              \:::\   \/____/     
         /:::/    /           \:::\    \               |::|   |               \:::\    \         
        /:::/    /             \:::\____\              \::|   |                \:::\____\        
        \::/    /               \::/    /               \:|   |                 \::/    /        
         \/____/                 \/____/                 \|___|                  \/____/         
                                                                                                   
*/ }

注意:字元在這裡是被註釋掉的,這樣利用上面的函式就能按照格式在控制檯輸出了

Step4: 使用console.log將剛剛定義的變數輸出:

        window.console.log(string.getMultiLine());

完整程式碼

<script>
    Function.prototype.getMultiLine = function () {
            var lines = new String(this);
            lines = lines.substring(lines.indexOf("/*") + 3, lines.lastIndexOf("*/"));
            
return lines; } var string = function () { /* _____ _____ _____ _____ /\ \ /\ \ /\ \ /\ \ /::\____\ /::\ \ /::\ \ /::\ \ /:::/ / \:::\ \ /::::\ \ /::::\ \ /:::/ / \:::\ \ /::::::\ \ /::::::\ \ /:::/ / \:::\ \ /:::/\:::\ \ /:::/\:::\ \ /:::/____/ \:::\ \ /:::/__\:::\ \ /:::/__\:::\ \ /::::\ \ /::::\ \ /::::\ \:::\ \ /::::\ \:::\ \ /::::::\ \ _____ ____ /::::::\ \ /::::::\ \:::\ \ /::::::\ \:::\ \ /:::/\:::\ \ /\ \ /\ \ /:::/\:::\ \ /:::/\:::\ \:::\____\ /:::/\:::\ \:::\ \ /:::/ \:::\ /::\____/::\ \/:::/ \:::\____/:::/ \:::\ \:::| /:::/__\:::\ \:::\____\ \::/ \:::\ /:::/ \:::\ /:::/ \::/ \::/ |::::\ /:::|____\:::\ \:::\ \::/ / \/____/ \:::\/:::/ / \:::\/:::/ / \/____/ \/____|:::::\/:::/ / \:::\ \:::\ \/____/ \::::::/ / \::::::/ / |:::::::::/ / \:::\ \:::\ \ \::::/ / \::::/____/ |::|\::::/ / \:::\ \:::\____\ /:::/ / \:::\ \ |::| \::/____/ \:::\ \::/ / /:::/ / \:::\ \ |::| ~| \:::\ \/____/ /:::/ / \:::\ \ |::| | \:::\ \ /:::/ / \:::\____\ \::| | \:::\____\ \::/ / \::/ / \:| | \::/ / \/____/ \/____/ \|___| \/____/ */ } window.console.log(string.getMultiLine()); </script>