您现在的位置是:首页>Web前端Web前端

百度首页console信息如何实现

胡小浪2018-12-06【Web前端】1497人已围观

简介在自己的网站加入百度一样的彩蛋

百度首页的效果是如何实现的呢?

image.png

其实很简单,如下代码即可实现

try{  
 if(window.console&&window.console.log)  
  {  
     console.log("一张网页,要经历怎样的过程,才能抵达用户面前?\n一位新人,要经历怎样的成长,才能站在技术之巅?\n探寻这里的秘密;\n体验这里的挑战;\n成为这里的主人;\n加入百度,加入网页搜索,你,可以影响世界。\n");  
     console.log("请将简历发送至%cps_recruiter@baidu.com(邮件标题请以“姓名-应聘XX职位-来自console”命名)","color:red");  
     console.log("职位介绍:http://dwz.cn/hr2013")}  
}  
catch(e){  
};

image.png

爱奇艺的招聘代码如下

try{  
 if(window.console&&window.console.log)  
  {  
    console.log("%ciQIYI","color:#008B45;text-shadow:5px5px2px#fff,5px5px2px#373E40,5px5px5px#A2B4BA,5px5px10px#82ABBA;font-weight:bolder;font-size:55px"); 
console.log("%c一不小心被你发现了:-)\r\n什么都不说了,这里需要喜欢探寻秘密的你!\r\n爱奇艺直聘网址:http://zhaopin.iqiyi.com/","color:#495A80;text-shadow:01px0#ccc,02px0#c9c9c9,01px0#bbb;font-size:20px");}  
}  
catch(e){  
};

image.png

整理我们发现他们都是使用console.log();实现的

console.log("%c内容","样式");

%c 非常重要,没有%c是无法实现样式的.

拓展:

image.png

Tags: JavaScript

扫一扫分享本页

很赞哦! (5)