今天閑來沒事,瞎逛, 發現了淘寶首頁的這個:
想起來之前在百度的 頁面中也曾看到過。於是乎自己試一試。
於是便見識到了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("一張網頁,要經歷怎樣的過程,才能抵達用戶面前?\n一位新人,要經歷怎樣的成長,才能站在技術之巔?\n探尋這里的秘密;\n體驗這里的挑戰;\n成為這里的主人;\n加入百度,加入網頁搜索,你,可以影響世界。\n"); 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 = "\n\nAngular; Backbone; Console; Dir; Express; Fork; Grunt; Haslayout; Iconfont;\nJsonp; Kissy; Localstorage; Media query; Npm; Opacity; Prototype; Querystring; Referer;\nSeajs; Trim; Underscore; Vim; Worker; Xss; Yslow; Zepto;\n\n如果你對上面26個單詞都能說出個所以然來,你就是我們要找的人,趕快加入我們吧!\n\n官網招聘入口:http://job.alibaba.com/zhaopin/position_detail.htm?positionId=5242\n面試官直郵:%cyuchun@taobao.com\n\n"; 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幫你做更多的事情吧!