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

[ideawu]

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

[图片]

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

[stoneJU]

我php工作近两年了，想进百度，就是没有机会，有人能帮忙推荐推荐不

//javascript

<script src='jquery-latest.pack.js' language='javascript'></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
	$("Table tr td Table").hide();
	$("Table tr td div").click(function() {
		$(this).next().toggle();	
	});
})
//-->
</script>

//以下是php代码

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


function printTable($arr) {
	$table = "<table style='background:#CCFFFF;border:1px solid #99FFFF;'>\r\n";
	foreach($arr as $key=>$_arr) {
		$childHtml = ($_arr['children'] != null) ? printTable($_arr['children']) : '';
		$table .= "<tr><td id=".$_arr['id']."><div>".$_arr['name']."</div>".$childHtml."</td></tr>\r\n";
	}
	$table .= "</table>\r\n";
	return $table;
}

echo printTable($cats)

[维子]

学习了，刚好复习了我昨天研究的递归

[leisure_cool]

贴个简单的

<?php
$cats = array(
	array(
        'id' => 1,
        'name' => '学术',
        'children' => array(
            array(
                'id' => 8,
                'name' => '学术A',
                'children' =>  array(
            array(
                'id' => 9,
                'name' => '学术B',
                'children' => null,
            ),  array(
                'id' => 10,
                'name' => '学术C',
                'children' => null,
            ),
			  array(
                'id' => 11,
                'name' => '学术D',
                'children' =>  array(
            array(
                'id' => 12,
                'name' => '学术D1',
                'children' => null,
				),
				),
            ),
            // ...
        ),
            ),
            // ...
        ),

    ),
	 array(
        'id' => 2,
        'name' => '教育',
        'children' =>array(
            array(
                'id' => 13,
                'name' => 'A教育',
                'children' =>array(
            array(
                'id' => 14,
                'name' => 'B教育',
                'children' =>null,
				),
				),
				),
				array(
                'id' => 15,
                'name' => 'C教育',
                'children' =>null,
				),
				),				
    ),
	 array(
        'id' => 3,
        'name' => '生活',
        'children' =>null,
    ),
	 array(
        'id' => 4,
        'name' => '运动．休闲',
        'children' =>null,
    ),
	 array(
        'id' => 5,
        'name' => '大众文化',
        'children' =>null,
    ),
	 array(
        'id' => 6,
        'name' => '娱乐',
        'children' =>null,
    ),
	 array(
        'id' => 7,
        'name' => '城市.区划',
        'children' =>null,
    ),
    // ...
);

function showtree($cats)
{
	$html   = '';
	$arrayCast = array();
	$rows =  count($cats);
	for($i = 0; $i < $rows; $i++)
	{	
		$id   = $cats[$i]['id'];
		$name = $cats[$i]['name'];
		$arrayCast = $cats[$i]['children'];
		$html .= '<li>';
		if ($arrayCast != null)
		{
			$html .= "<a href='javascript:void(0)' onclick='retractable(".$id.")'><span id='span".$id."'>+</span>".$name."</a>";
		}
		else
		{
			$html .= ''.$name.'';
		}
		$html .= '</li>' ;
		if ($arrayCast != null)
		{	
			$html .= '<ul id="ul'.$id.'" style="display:none">';			
			$html .= showTree($arrayCast);
			$html .= '</ul>';
		}
	}
	return '<ul>'.$html.'</ul>';
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>baidu test</title>
<style type="text/css">
ul {margin:0px; width:100px; list-style:none;padding-left:30px;}
ul li{width:100px;;}
ul li a{text-decoration: none; }
ul li a:hover{ color:#F00; text-decoration: none;}
</style>
<script type="text/javascript" language="javascript">
/*
@Retractable 展开或收起li标签
@parm ulid  : obj ul标签id
@parm signid：string +-符号id
@author zhaolei
*/
function retractable(signid)
{
	var spansign = document.getElementById('span' + signid);
	var ulid     = document.getElementById('ul' + signid);
	if (spansign.innerHTML == '-')
	{
		spansign.innerHTML = '+';
		ulid.style.display = 'none';
	}
	else
	{
		spansign.innerHTML = '-';
		ulid.style.display = 'block';
	}	
}
</script>
</head>
<body>
<div>
<?php echo showtree($cats);?>
</div>
</body>
</html>

[周文洪]

献上一个更简单的

    <?php
	$cats = array(
		array(
			'id' => 1,
			'name' => '学术 && 教育',
			'children' => array(
				array(
					'id' => 11,
					'name' => '自然科学',
					'children' => null
				),
				array(
					'id' => 12,
					'name' => '人文科学',
					'children' => null
				),
				array(
					'id' => 13,
					'name' => '期刊会议',
					'children' => null
				),
				array(
					'id' => 14,
					'name' => '高校名称',
					'children' => array(
						array(
							'id' => 11,
							'name' => '西电',
							'children' => null
						),
						array(
							'id' => 12,
							'name' => '交大',
							'children' => null
						),
						array(
							'id' => 13,
							'name' => '西工大',
							'children' => null
						),
					)
				)
			)
		),
		array(
			'id' => 2,
			'name' => '生活',
			'children' => array(
				array(
					'id' => 21,
					'name' => '品茶',
					'children' => null
				),
				array(
					'id' => 22,
					'name' => '美食',
					'children' => null
				),
				array(
					'id' => 23,
					'name' => '运动',
					'children' => null
				),
				array(
					'id' => 24,
					'name' => '养生',
					'children' => null
				)
			),
		)
	);
	
	function deep_array($arr){	
		foreach($arr as $v){
				//输出一级目录
				echo "<li>".$v['name']."</li>";
		
				if(is_array($v['children'])){
					//输出自己目录
					echo "<ul class='wrap'>";
					deep_array($v['children']);
					echo "</ul>";
				}
		}
	}
	echo "<ul class='tree_root'>";
	deep_array($cats);
	echo "</ul>";
?>

输出样式：

· 学术 && 教育
ｏ自然科学
ｏ人文科学
ｏ期刊会议
ｏ高校名称
▪ 西电
▪ 交大
▪ 西工大
· 生活
ｏ品茶
ｏ美食
ｏ运动
ｏ养生
没有添加css样式和js效果 如果有什么问题，QQ 1434789302 联系小弟，一起研究研究！

[hellowordandhello]

推荐使用json

[abcde10565]

说实话，这个真不难

[cdphp]

这个题不难吧？我给公司做的这种东西。。1个小时就完成了所有功能，还包括后台添加，删除

[ITniao]

百度不会像这样招聘人的

[大唐遗主]

没想过这样的哦，算是长见识了！学习学习！

[hairdog]

这个现在还算数吗？小弟是12届的本科生，现在大四，没课了，想到百度工作，因为家里有事，百度第一轮笔试错过了！最近学php已经2个月了，在网上搜题做的时候刚看到这个，自己做了一下！您看我能进百度吗？
下面是代码~
我的邮箱是：[e-mail]或[e-mail]
电话号码是：15010118439.
————————————————————————————

<?php
 	$cats = array(
	    array(
	        'id' => 1,
	        'name' => '学术和教育',
	        'children' => array(
	            array(
	                'id' => 2,
	                'name' => '自然科学',
	                'children' => array(
	                	array(
		                	'id' => 3,
			                'name' => '生物',
			                'children' => null
		                )
		        	)
	            ),
	            array(
	            	'id' => 4,
	                'name' => '人文社科',
	                'children' => null
	            )
	        )
	    ),
	    array(
	    	'id' => 5,
	        'name' => '生活',
	        'children' => null
	    )
	);
	class treemenue{
		private $tree=array();
		private $treeinfo=array();
		public function __construct($arr){
			$this->tree=$arr;
		}

		private function gettree($arr,$position){
			foreach($arr as $key=>$value){
				$tmp=$position;
				$position.=$key;//记录当前的节点位置

				$this->treeinfo["$position"]=array('id'=>$value['id'],'name'=>$value['name']);
				if($value['children']!=null){
					$this->gettree($value['children'],$position);
				}
				$position=$tmp;
			}
		}
		public function creattree(){
			$this->gettree($this->tree,null);
			return $this->treeinfo;
		}
		public function countitem(){
			return count($this->treeinfo);
		}
		public function getdepth(){
			$maxdepth=0;
			foreach($this->treeinfo as $key=>$value){
				$maxdepth=$maxdepth>strlen($key)?$maxdepth:strlen($key);
			}
			return $maxdepth;
		}
	}
	$t=new treemenue($cats);
	$trinfo=$t->creattree();
	$max=$t->getdepth();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>树形菜单</title>
<script>
	var a=new Array();
	var n=<?php echo $t->countitem(); ?>;
	<?php
		$j=0;
		foreach($trinfo as $key=>$value){
	?>
		a[<?php echo $j;?>]="<?php echo $key; ?>"+"-";
	<?php
			$j++;
		}
	?>
	function rollmenue(id){//伸缩菜单的函数
		for(var i=0;i<n;i++){
			if(a[i].substr(0,a[i].length-1)==id){
				if(a[i].substr(a[i].length-1,1)=="+")
					a[i]=id+"-";
				else
					a[i]=id+"+";
				break;
			}
		}

		var clmenue="";
		for(var q=0;q<n;q++){
			if(a[q].substr(a[q].length-1,1)=="-"){//展开的菜单
				for(var k=q+1;k<n;k++){
					if(a[k].length>a[q].length)
						document.getElementById(a[k].substr(0,a[k].length-1)).style.display="inline-table";
					else
						break;
				}
			}
			else{//缩起的菜单
				for(var k=q+1;k<n;k++){
					if(a[k].length>a[q].length)
						document.getElementById(a[k].substr(0,a[k].length-1)).style.display="none";
					else{
						q=k-1;
						break;
					}
				}
			}
		}
	}
</script>
<style type="text/css">
	#tree{
		float:left;
	}
	<?php
		for($i=0;$i<=$max;$i++){
			$pos=20*$i;
			$color=220*$i;
			echo ".n".$i."{margin-left:{$pos}px;}";
			echo ".n".$i." a{text-decoration:none;color:#ff8000;}";
			echo ".m".$i."{" .
					"font-weight:bold;" .
					"background-color:#".$color.";".
					"}";
		}
	?>
</style>

</head>
<body>
	<div id="tree">
		<?php foreach($trinfo as $key=>$value){ ?>
			<div class="<?php echo "m".strlen($key);?>" id="<?php echo $key;?>" onclick="rollmenue('<?php echo $key;?>');">
				<div class="<?php echo "n".strlen($key);?>">
					<a href="#?id=<?php echo $value['id']; ?>"><?php echo $value['name'];?>	</a>
				</div>
			</div>
		<?php } ?>
	</div>
</body>
</html>

[jn_linuxin]

ddddddddddddddd

[pifubinhao]

都高手的。。。

[yizhihu1970]

这么多说不难滴人啊，过段时间我也来说不难

[hehedanz]

看不懂

[rainxies]

史上最强大的PHP？ php只需要写一行：json_encode($cats)？ 剩下的都是javascript？ 连我这个新手都觉得羞了，呵呵呵

[linkinparkjack]

表示后来混水

[再看我一眼]

引用 122 楼 aokihu 的回复:

唉，看了和多人都说这个功能简单，但是你们想过性能问题吗？ 简单来分析下吧 1.用户的最大等待时间是3秒，这个只是整个页面的一部分，因此它的加载速度应该小于3秒，也就是说在56kb速度的情况下该模块最大显示时间不能多于3秒，超过3秒用户就会跳转，那你做出来后谁来看？ 2。作者说这个数据量和层级是无限制的，如果全部直接往页面输出的话就会造成服务器与带宽的压力，而在未全部渲染完之前用户是无法看到数据的，因此会造成网站假死的现象，这也是没有任何实用价值的。 3.数据量是无限制的，而用户想要看的内容只是一部分，不会全部遍历整个树，因此加载整个树的数据是毫无必要的，而且大数据传输也很耗时间。 4.大家只是在单用户请求情况下做的开发，如果用户数突破万人，这样的情况怎么解决？ 5.过多的DOM对象会拖慢页面的访问速度，和吃掉用户的内存，而很多情况下这些DOM是不会显示的。 我的解决方案，不成熟，大家可以讨论下： 1.后台数据格式使用json，这个好处大家都知道，就不说明了 2.php只输出第一层级的数据，其他数据通过ajax实现 3.当页面加载完成后，开始载入二到三级的数据，再多也没必要，因为用户点不点都不知道 4.当鼠标悬停在某一个栏目上时，即时加载相应的数据 5.设定定时器，清除不使用的目录数据，减少DOM，释放内存

新视界... 之前没想到 好顶赞

[zhuoxiong]

http://blog.csdn.net/zhuoxiong/article/details/9388781 http://blog.csdn.net/zhuoxiong/article/details/9392271 这篇文章的结合可以实现这个！

[我的昵称是kimlee]

怎么感觉这道题很简单呢，不就是一个递归就搞定了吗

[hanxu0]

$cats = array(
    array(
        'id' => 1,
        'name' => '学术和教育',
        'children' => array(
            array(
                'id' => 2,
                'name' => '自然科学',
                'children' => null,
            ),
        ),
    ),
	array(
        'id' => 3,
        'name' => '农业',
        'children' => array(
            array(
                'id' => 4,
                'name' => '种植',
                'children' => null,
            ),
			 array(
                'id' => 5,
                'name' => '养殖',
                'children' => array(
					array(
						'id' => 6,
                		'name' => '养牛',
               			'children' => null,
					),
					array(
						'id' => 6,
                		'name' => '养猪',
               			'children' => null,
					),
				),
            ),
        ),
    ),
);


function array2tree($array)
{	
	echo '<ul class="cats">',"\r\n";
	foreach($array as $k=>$v)
	{		
		$i=1;
		echo '<li><a>',$v['name'],'</a>',"\r\n";
		if(count($v['children'])){	
			echo '<a href="javascript:;" onMouseDown="var c=document.getElementById(\'catid_',$v['id'],'\');if(c.style.display==\'none\'){c.style.display=\'\';this.innerHTML=\'关闭\';}else{c.style.display=\'none\';this.innerHTML=\'展开\';}">关闭</a>';
			echo '<div id="catid_',$v['id'],'">';
			array2tree($v['children']);
			echo '</div>';
		}
		echo '</li>',"\r\n";
	}	
	echo '</ul>',"\r\n";
	
}


array2tree($cats);

无聊玩玩