【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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值