美文网首页
知乎chrome控制台字符画招聘信息实现

知乎chrome控制台字符画招聘信息实现

作者: 陈川Lethe | 来源:发表于2017-02-16 12:50 被阅读549次

    知乎主页使用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>
    

    相关文章

      网友评论

          本文标题:知乎chrome控制台字符画招聘信息实现

          本文链接:https://www.haomeiwen.com/subject/xxzcwttx.html