zoukankan      html  css  js  c++  java
  • js中的console很强大

     今天闲来没事,瞎逛, 发现了淘宝首页的这个:

      想起来之前在百度的 页面中也曾看到过。于是乎自己试一试。

      于是便见识到了console对象其实很强大,用好它对调试真的有很大帮助。

     代码:

     1 <!DOCTYPE html>
     2 <html lang="zh">
     3 <head>
     4 <meta charset=utf-8>
     5     <title>demo</title>
     6 </head>
     7 <body>
     8 
     9  
    10       
    11   
    12  <script>
    13       /*要注意其中的%c符号,他是用来给输出添加样式的,对把它写在开头的有效*/
    14       /*这是百度的*/
    15  /*    try {
    16                if (window.console && window.console.log) {
    17                 console.log("一张网页,要经历怎样的过程,才能抵达用户面前?
    一位新人,要经历怎样的成长,才能站在技术之巅?
    探寻这里的秘密;
    体验这里的挑战;
    成为这里的主人;
    加入百度,加入网页搜索,你,可以影响世界。
    ");
    18                 console.log("请将简历发送至 %c ps_recruiter@baidu.com( 邮件标题请以“姓名-应聘XX职位-来自console”命名)", "color:red");
    19                 console.log("职位介绍:http://dwz.cn/hr2013")
    20             }
    21         } catch (e) {
    22         }*/
    23         /*这是淘宝的*/
    24         var a = "
    
    Angular; Backbone; Console;    Dir;      Express;  Fork;   Grunt;    Haslayout;    Iconfont;
    Jsonp;   Kissy;    Localstorage; Media query;  Npm;    Opacity;  Prototype;  Querystring;  Referer;
    Seajs;    Trim;   Underscore;   Vim;      Worker;   Xss;    Yslow;    Zepto;
    
    如果你对上面26个单词都能说出个所以然来,你就是我们要找的人,赶快加入我们吧!
    
    官网招聘入口:http://job.alibaba.com/zhaopin/position_detail.htm?positionId=5242
    面试官直邮:%cyuchun@taobao.com
    
    ";
    25         try {
    26             window.console.log(a, "color: red")
    27         } catch (e) {
    28         }
    29     
    30  </script>   
    31 </body>
    32 </html>

    这里是WIKI的console api:http://getfirebug.com/wiki/index.php/Console_API#console.log.28object.5B.2C_object.2C_....5D.29

    在 这样写之前也曾尝试过如下这种写法,不过意义却都不一样了,也变相显示了 console其实很强大。

     1 <!DOCTYPE html>
     2 <html lang="zh">
     3 <head>
     4 <meta charset=utf-8>
     5     <title>demo</title>
     6 </head>
     7 <body>
     8 
     9   <span id="span">Angular;  Backbone; Console;    Dir;      Express;  Fork;   Grunt;    Haslayout;    Iconfont;    Jsonp;    Kissy;    Localstorage; Media query;  Npm;    Opacity;  Prototype;  Querystring;  Referer;  Seajs;    Trim;   Underscore;   Vim;      Worker;   Xss;    Yslow;    Zepto;
    10   
    11   </span>
    12       
    13   
    14  <script>
    15     
    16     console.log('%o',document.getElementById('span').innerHTML);
    17 
    18 
    19     
    20  </script>   
    21 </body>
    22 </html>

    看好api让console帮你做更多的事情吧!

  • 相关阅读:
    git相关
    String,static,final
    tomcat和servlet的基本了解
    xml的相关知识
    js基础
    HTML
    Java之JDBC连接池
    Java之JDBC
    Java的内存模型
    Java的内存结构
  • 原文地址:https://www.cnblogs.com/skylar/p/3932694.html
Copyright © 2011-2022 走看看