search
HomeBackend DevelopmentPHP Tutorial史上最强大的PHP Web面试题(会做就能进百度)

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

[图片]

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

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


请写一段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>


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


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

      这种效果用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>

重新改了下,代码更简洁

<!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>

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

学习了,很多都还不会

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

这东西就能进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的

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
PHP in Action: Real-World Examples and ApplicationsPHP in Action: Real-World Examples and ApplicationsApr 14, 2025 am 12:19 AM

PHP is widely used in e-commerce, content management systems and API development. 1) E-commerce: used for shopping cart function and payment processing. 2) Content management system: used for dynamic content generation and user management. 3) API development: used for RESTful API development and API security. Through performance optimization and best practices, the efficiency and maintainability of PHP applications are improved.

PHP: Creating Interactive Web Content with EasePHP: Creating Interactive Web Content with EaseApr 14, 2025 am 12:15 AM

PHP makes it easy to create interactive web content. 1) Dynamically generate content by embedding HTML and display it in real time based on user input or database data. 2) Process form submission and generate dynamic output to ensure that htmlspecialchars is used to prevent XSS. 3) Use MySQL to create a user registration system, and use password_hash and preprocessing statements to enhance security. Mastering these techniques will improve the efficiency of web development.

PHP and Python: Comparing Two Popular Programming LanguagesPHP and Python: Comparing Two Popular Programming LanguagesApr 14, 2025 am 12:13 AM

PHP and Python each have their own advantages, and choose according to project requirements. 1.PHP is suitable for web development, especially for rapid development and maintenance of websites. 2. Python is suitable for data science, machine learning and artificial intelligence, with concise syntax and suitable for beginners.

The Enduring Relevance of PHP: Is It Still Alive?The Enduring Relevance of PHP: Is It Still Alive?Apr 14, 2025 am 12:12 AM

PHP is still dynamic and still occupies an important position in the field of modern programming. 1) PHP's simplicity and powerful community support make it widely used in web development; 2) Its flexibility and stability make it outstanding in handling web forms, database operations and file processing; 3) PHP is constantly evolving and optimizing, suitable for beginners and experienced developers.

PHP's Current Status: A Look at Web Development TrendsPHP's Current Status: A Look at Web Development TrendsApr 13, 2025 am 12:20 AM

PHP remains important in modern web development, especially in content management and e-commerce platforms. 1) PHP has a rich ecosystem and strong framework support, such as Laravel and Symfony. 2) Performance optimization can be achieved through OPcache and Nginx. 3) PHP8.0 introduces JIT compiler to improve performance. 4) Cloud-native applications are deployed through Docker and Kubernetes to improve flexibility and scalability.

PHP vs. Other Languages: A ComparisonPHP vs. Other Languages: A ComparisonApr 13, 2025 am 12:19 AM

PHP is suitable for web development, especially in rapid development and processing dynamic content, but is not good at data science and enterprise-level applications. Compared with Python, PHP has more advantages in web development, but is not as good as Python in the field of data science; compared with Java, PHP performs worse in enterprise-level applications, but is more flexible in web development; compared with JavaScript, PHP is more concise in back-end development, but is not as good as JavaScript in front-end development.

PHP vs. Python: Core Features and FunctionalityPHP vs. Python: Core Features and FunctionalityApr 13, 2025 am 12:16 AM

PHP and Python each have their own advantages and are suitable for different scenarios. 1.PHP is suitable for web development and provides built-in web servers and rich function libraries. 2. Python is suitable for data science and machine learning, with concise syntax and a powerful standard library. When choosing, it should be decided based on project requirements.

PHP: A Key Language for Web DevelopmentPHP: A Key Language for Web DevelopmentApr 13, 2025 am 12:08 AM

PHP is a scripting language widely used on the server side, especially suitable for web development. 1.PHP can embed HTML, process HTTP requests and responses, and supports a variety of databases. 2.PHP is used to generate dynamic web content, process form data, access databases, etc., with strong community support and open source resources. 3. PHP is an interpreted language, and the execution process includes lexical analysis, grammatical analysis, compilation and execution. 4.PHP can be combined with MySQL for advanced applications such as user registration systems. 5. When debugging PHP, you can use functions such as error_reporting() and var_dump(). 6. Optimize PHP code to use caching mechanisms, optimize database queries and use built-in functions. 7

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
1 months agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

SecLists

SecLists

SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

SublimeText3 Linux new version

SublimeText3 Linux new version

SublimeText3 Linux latest version

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)