史上最强大的PHP Web面试题(会做就能进百度)-tutoriel php-php.cn

注: 只要你会做了这道题目, 你的能力已经可以进入百度了! 如果别的部门不要你, 请你给我发邮件, 我一定尽我所能强烈推荐你! 如果你不想加入百度, 而别的公司又不要你, 只能说明那家公司瞎眼了.

[图片]

题目: 见图片, 该图是某网页的一个区域的截图, 用于显示商品或者其它信息的分类. 该分类的每一项可以折叠和收起(展开和收缩, 如果有子分类的话). 分类的级数不固定. 现有一个PHP变量:

$cats = array(    array(        'id' => 1,        'name' => '学术和教育',        'children' => array(            array(                'id' => 2,                'name' => '自然科学',                'children' => null,            ),            // ...        ),    ),    // ...);

Copier après la connexion

请写一段PHP代码, 将该数组所包含的分类数据生成一段能实现如图片所示功能的HTML/JavaScript代码, 可不考虑CSS样式.

???-

注解: 这道题目考察的范围非常广, 包括PHP, HTML, JavaScript, CSS, 递归, 只有真正掌握了如上几种全部技能, 才能实现完整的功能, 否则必须依赖分工. 应聘者所能实现的程度越大, 得分就越高.

如果应聘者的应聘职位不包括HTML/JS/CSS, 那么题目可改为: 把上面的PHP数据用缩进换行文本的形式保存到文件, 并读取文件生成一个同样的PHP数组.(自定义格式的序列化和反序列化)

看到这篇日志的读者, 如果已经做了出来, 并且个人想加入百度, 请在评论中回复URL并说明你的意愿, 我会主动联系你. 或者你可以把程序打包发给我.

原文: http://www.ideawu.net/blog/archives/585.html

回复讨论(解决方案)

就算会做也不进那鬼地方

学习学习

array->xml->xmltree 搞定，不过xmtree是别人写好的，嘿嘿

array->xml->xmltree 搞定，不过xmtree是别人写好的，嘿嘿
哈哈, 当然需要自己写了.

这么简单的东西！

我突然发现今天是一个特殊的日子.已经上了google的当了,不想再落百度的坑.

会做，但是花的时间长。长到无法面试解决。

楼上太夸张了，当然可以面试解决（估计少则半小时，多则一小时也就结束了）

我表示这么简单的东西不可能是百度的要求。。。

vb vb 好戏发

会做，但是花的时间长。长到无法面试解决。
有生之年百度之门向你敞开

我做了个，很丑陋。而且只在firefox下正常执行，IE下不好使。

查看效果：
http://life161.web-48.com/t.php

代码：

<?PHPheader("content-type:text/html;charset=utf-8");$cats = array(    array(        'id' => 1,        'name' => '学术和教育',        'children' => array(            array(                'id' => 9,                'name' => '自然科学',                'children' => null,            ),            array(                'id' => 8,                'name' => '社会科学',                'children' => null,            ),            array(                'id' => 23,                'name' => '哲学',                'children' => null,            ),            // ...        ),    ),    array(        'id' => 3,        'name' => '科技与发明',        'children' => array(            array(                'id' => 4,                'name' => '航天科技',                'children' => null,            ),            array(                 'id' => 5,                 'name' => '火箭技术',                 'chileren' => null,            ),            array(                'id' => 6,                'name' => '卫星技术',                'children' => null,            ),            // ...        ),    ),    // ...);echo "<script type=\"text/javascript\">var myarr=".json_encode($cats).";</script>\n";//echo json_encode($cats) ;?><style type="text/css">ul { list-style-type: none; margin:0px; width:100px}ul li a{ display:block;  background:#ccc; }ul li a:hover{ background:#999; }</style><script type="text/javascript">var out='' ;function showout(arr){  for(var i=0;i<arr.length;i++){    if(arr[i]['children']!=null){      out += "</ul><li class='item'><a href='#'><b>"+arr[i]['name']+"</b></a></li><ul class='list'>";      showout(arr[i]['children']);    }else{      out += "<li class='item'><a href='#'><b>"+arr[i]['name']+"</b></a></li>";    }  }  return out ;}var outstr = "<ul class='list'>"+showout(myarr)+"</ul>";document.write(outstr);</script><script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="ul.js"></script>

Copier après la connexion

ul.js：

$(document).ready( function() {	$("li + ul").hide();		$("li").click( function(){		//alert($(this).text());		$(this).find("+ul.list").toggle();	});});

Copier après la connexion

自己看着很郁闷，请高手指点。

这种效果用PHP做是不是有点远水解近渴了，这个效果就是前端的EXT或JQUERY-UI里的节点数tree吧，为什么一定要用PHP来达到这个效果，JAVASCRIPT完成不是更好吗？而且配置也灵活，数据.JSON数据组织形式如：
[{
"id":1,
"code":"01",
"name":"name1",
"addr":"address1",
"col4":"col4 data",
"iconCls":"icon-ok",
"children":[{
"id":2,
"code":"0101",
"name":"name11",
"addr":"address11",
"checked":true
},{
"id":3,
"code":"0102",
"name":"name12",
"addr":"address12",
"state":"closed"
}]
},{
"code":"02",
"name":"Languages abc",
"addr":"address2",
"col4":"col4 data",
"state":"closed",
"children":[{
"code":"0201",
"name":"Java",
"col4":"col4 data",
"state":"closed",
"children":[{
"code":"02013",
"name":"jdk1"
},{
"code":"02014",
"name":"jdk2"
}]
},{
"code":"0202",
"name":"C#",
"col4":"col4 data"
}]
}]
这个结构我觉得整体应用上应该比PHP来得更实际些！

个人看法：我不明白楼主为什么把这种应用称为史上最强大的PHP应用，还有用JS我觉得不管是性能上还是易用上都强过PHP，毕竟处理部分是交给客户端来展示分析效果的，而后台仅仅只是提供一些数据，以JSON形式返回给前端部分，没有必要让PHP去处理那么多的事务，其实我觉得这个要求和TREE树几乎是一样的，区别只是数据组织上的平台不同而已。换汤不换用，原理早就在生产实践中应用了，楼主说用JS的会应用百度引擎，那我就实在不理解了！难道纯PHP能实现节点树吗？

一定要进百度？

不就递归的应用吗，。。。。

代码中的json数据通过php服务器端取得。html,js,css代码如下，未使用任何js框架。支持全浏览器。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>php</title><script type="text/javascript">	var treeData = [{		id: 1,		name: "学术和教育",		children: [			{				id: 2,				name: "自然科学",				children: null			},			{				id: 3,				name: "社会科学",				children: [					{						id: 4,						name: "建筑学",						children: null					}				]			},			{				id: 4,				name: "哲学",				children: [					{						id: 4,						name: "建筑学",						children: null					}				]			}		]	},	{		id: 5,		name: "科技与发明",		children: null	}];	(function() {		var isIE = /msie/i.test(navigator.userAgent) && !window.opera;		function createElement(tagName, styles, props) {			var tag = document.createElement(tagName);			if (styles) {				for (var styleName in styles) {					if (isIE && styleName == "cssFloat") {						styleName = "styleFloat";					}										tag.style[styleName] = styles[styleName];				}			}			if (props) {				for (var prop in props) {					tag[prop] = props[prop];				}			}			return tag;		}		function addNode(currentObj, parentNode) {			var dlTag = createElement("dl");			var ddTag = createElement("dd", {					cursor: "pointer"				}, {					id: currentObj.id				});			var textNode = document.createTextNode(currentObj.name);			var childTag = createElement("div");			var children = currentObj.children;			if (children) {				for (var index = 0; index < children.length; index++) {					addNode(children[index], childTag);				}			}			ddTag.onclick = function(e) {				var event = e || window.event;				if (event.stopPropagation) {					event.stopPropagation();				} else {					event.cancelBubble = true;				}								var childrenDiv = this.getElementsByTagName("div")[0];				if (childrenDiv.style.display == "none") {					childrenDiv.style.display = "block";				} else {					childrenDiv.style.display = "none";				}			};						ddTag.appendChild(textNode);			ddTag.appendChild(childTag);			dlTag.appendChild(ddTag);			parentNode.appendChild(dlTag);		}		function initDisplay(container) {			var childrenDivs = container.getElementsByTagName("div");			for (var index = 0; index < childrenDivs.length; index++) {				childrenDivs[index].style.display = "none";			}		}		JTree = function(containerId, datas) {			var container = document.getElementById(containerId);			for (var index = 0; index < datas.length; index++) {				addNode(datas[index], container);			}						initDisplay(container);		};	})();	window.onload = function() {		new JTree("container", treeData);	};</script></head><body>	<div id="container"></div></body></html>

Copier après la connexion

重新改了下，代码更简洁

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>php</title><script type="text/javascript">	var treeData = [{		id: 1,		name: "学术和教育",		children: [			{				id: 2,				name: "自然科学",				children: null			},			{				id: 3,				name: "社会科学",				children: [					{						id: 4,						name: "建筑学",						children: null					}				]			},			{				id: 4,				name: "哲学",				children: [					{						id: 4,						name: "建筑学",						children: null					}				]			}		]	},	{		id: 5,		name: "科技与发明",		children: [{			id: 6,			name: "导弹",			children: [				{					id: 4,					name: "流体力学",					children: null				}			]		}]	}];	(function() {		var isIE = /msie/i.test(navigator.userAgent) && !window.opera;		function createElement(tagName, styles, props) {			var tag = document.createElement(tagName);			if (styles) {				for (var styleName in styles) {					if (isIE && styleName == "cssFloat") {						styleName = "styleFloat";					}										tag.style[styleName] = styles[styleName];				}			}			if (props) {				for (var prop in props) {					tag[prop] = props[prop];				}			}			return tag;		}		function addNode(currentObj, parentNode) {			var dlTag = createElement("dl");			var ddTag = createElement("dd", {					cursor: "pointer"				}, {					id: currentObj.id				});			var textNode = document.createTextNode(currentObj.name);			var childTag = createElement("div", {display: "none"});			var children = currentObj.children;			if (children) {				for (var index = 0; index < children.length; index++) {					addNode(children[index], childTag);				}			}			ddTag.onclick = function(e) {				var event = e || window.event;				if (event.stopPropagation) {					event.stopPropagation();				} else {					event.cancelBubble = true;				}								var childrenDivs = this.getElementsByTagName("div");				if (childrenDivs[0] && childrenDivs[0].style.display == "none") {					childrenDivs[0].style.display = "block";				} else {					for (var index = 0; index < childrenDivs.length; index++) {						childrenDivs[index].style.display = "none";					}				}			};						ddTag.appendChild(textNode);			ddTag.appendChild(childTag);			dlTag.appendChild(ddTag);			parentNode.appendChild(dlTag);		}		JTree = function(containerId, datas) {			var container = document.getElementById(containerId);			for (var index = 0; index < datas.length; index++) {				addNode(datas[index], container);			}		};	})();	window.onload = function() {		new JTree("container", treeData);	};</script></head><body>	<div id="container"></div></body></html>

Copier après la connexion

很想学,目前的能力还做不出~

学习了,很多都还不会

请问楼主
这个东西有难度吗

这东西就能进baidu。。。。。。呵呵呵。。。。哈哈哈

一看发帖时间是3.31而不是4.1不知是不是提前过愚人节呢

高手是有点多啊

应该是愚人节吧

代码中的json数据通过php服务器端取得。html,js,css代码如下，未使用任何js框架。支持全浏览器。
HTML code
nbsp;html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

不错! 代码很简洁. 不过, 有点小瑕疵, 那就是收缩再展开后, 并没有恢复到收缩前的状态, 和一般的体验不一致. 兄弟要是有兴趣, CSS也不错的话, 可以试投一下前端相关的职位.

百度代理公司的飘过
这个我弄过几个,没什么难度,不过确实很需要比较全面的知识
需要逆着去推,知道怎样可以构造一个收缩展开的html+css, 攥写配套js, 然后要写个php类来能够根据传入的数组构造html进行输出.

自己弄实现,不依赖现成的,会有个地方比较费时间
弄那种虚线的对准的css

百度是这个门槛啊，哈哈，表示不想进

只要你会做了这道题目, 你的能力已经可以进入百度了!百度就这点料，，，百度是靠什么赚钱的？百度不是靠技术（开发新产品）赚钱的，百度靠的广告赚钱。。。百度没技术一样能赚钱，所以除了上面研发部门，找几个牛人，其他部门全找去前台接电话去吧

引用 21 楼 rainsilence 的回复:

代码中的json数据通过php服务器端取得。html,js,css代码如下，未使用任何js框架。支持全浏览器。
HTML code
nbsp;html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
……
比如这个？http://hr.baidu.com/www/job/jobDetail.action?jobId=1966

用php实现起来，好像没有js的速度快

用php实现起来，好像没有js的速度快

输出html直接用php比较方便.

用函数,输入一个符合特定要求的数组后,递归输出html

当然也可以php输出json, 用js在前端组装效果,不过这样的话操作比较复杂

就算会做也不进那鬼地方

都是高手！

这个有点难度啊

是楼主不会自己不会搞

弄个噱头让别人帮你?...

csdn 大内高手如浮云

看不到图啊

太简单了吧

不是这专业的.... 这题目难不~~~ 有哪位知道.

不错。。

晕，估计这水平进百度也就是个打杂的。。。

要不然就是百度做web的水平太次了。。。

再不然就是LZ出来忽悠人的。。。

有一年经验的差不多了。

study....

好啊!!!

貌似很容易，可是作下来还真要花一些时间。

1、用php递归拼装json + JS 拼装 HTML 和效果 + CSS
2、用PHP递归直接拼装HTML + CSS + JS效果
3、JS别用jquery写，否则会被出题的人鄙视的。

功能很强，有点难

LZ是百度的HR吧？哈哈

能力不知咋样，不过，挺会忽悠人的。

忽悠人么虽然经典的题但是难度不大啊

这不是什么很复杂很高深的东西吧？？

晕，这是事件营销，不是招聘

百度也就这点能耐?
为了程序的业务逻辑和处理请求前段视图分离

这个数据就是model
写一个处理请求页面.
新建一个service页面吧数据转化成 json
返回给前台页面。

用java循环处理json，添加到dom.
在每个节点开始地方绑定一个事件用于控制该dom节点下的显示与隐藏！

重新改了下，代码更简洁

HTML code
nbsp;html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

不使用框架说明JS水平已经很高了，但是工作效率大大下降了。偷偷的告诉你，百度有个开源框架，建议使用他的框架去实现一下。嗯。。貌似有讨好百度的嫌疑哦

不好意思，我的项目刚好用到啊。呵呵

上传不了图片，要不我传上来看一下。哈哈

http://t.qq.com/hougaoping/mine

这么多高手啊

很敢兴趣，我来试一下

请看效果图：

纯HTML+JS实现
http://www.bllarchitects.com/demo/demo.html

限于虚拟主机只支持ASP，所以只给出ASP实现代码

楼主的方法不够面向对象，我还可提供ASP/PHP/JSP/C#面向对象实现代码。

另外如果分类太多，最好用AJAX获取2级分类，如需要代码，可email给我

这种东西考的是熟练度就算会做又怎么样一个能成长的程序员就算不懂php css 上手绝对快以后写的东西不会比现在就会写的人差

是不是楼主不会做，想刺激一下各位，让各位帮他做，这种应用又没有复杂的算法，又没有庞大的规模，谁做不出，懂点PHP HTML CSS Javascript的皮毛的人都能做，而这种人才大把

实现起来不难

首先先展示，然后通过jquery实现显示与隐藏就可以

一个小小的递归就可以解决了，写过树结构的应该都能很轻松的写出来

这么简单一个东西就能进百度?吹了吧?

我晕就是一个树菜单啊不过实现代码有好坏难到要最好的

楼上太夸张了，当然可以面试解决（估计少则半小时，多则一小时也就结束了）

不难，费时

确实不难

百度其实挺好进的。我旁边很多朋友都去了。。。也有做PHP的