注: 只要你会做了这道题目, 你的能力已经可以进入百度了! 如果别的部门不要你, 请你给我发邮件, 我一定尽我所能强烈推荐你! 如果你不想加入百度, 而别的公司又不要你, 只能说明那家公司瞎眼了.
题目: 见图片, 该图是某网页的一个区域的截图, 用于显示商品或者其它信息的分类. 该分类的每一项可以折叠和收起(展开和收缩, 如果有子分类的话). 分类的级数不固定. 现有一个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并说明你的意愿, 我会主动联系你. 或者你可以把程序打包发给我.
----------
Loading ...
<?php
error_reporting(E_ALL | E_STRICT);
$cats = array(
array(
‘id’=>1,
‘name’=>’学术和教育’,
‘children’=>array(
array(
‘id’=>2,
‘name’=>’自然科学’,
‘children’=>null
),
array(
‘id’=>3,
‘name’=>’人文社科’,
‘children’=>null
),
array(
‘id’=>4,
‘name’=>’期刊会议’,
‘children’=>null
),
array(
‘id’=>5,
‘name’=>’高校名称’,
‘children’=>array(
array(
‘id’=>6,
‘name’=>’BNUEP’,
‘children’=>null
)
)
)
)
),
array(
‘id’=>7,
‘name’=>’生活’,
‘children’=>null
)
);
class Category{
private $src_datas;
private $tree;
function __construct($data = array() ){
$this->src_datas = $data;
}
function set_datas( $data = array() ){
$this->src_datas = $data;
}
function get_tree(){
return $this->pend();
}
private function pend(){
$ret = array();
array_push($ret,'<ul>’);
if(! empty($this->src_datas) ){
foreach($this->src_datas as $cat){
array_push($ret,'<li>’);
array_push($ret,$cat['name']);
if( isset($cat['children']) && is_array($cat['children']) ){
$ret = array_merge($ret, $this->get_children($cat['children'], 1));
}
array_push($ret, ‘</li>’);
}
}
array_push($ret,'</ul>’);
return join("\r\n",$ret);
}
private function get_children($children,$deep = 1){
$ret = array();
array_push($ret, ‘<div>’);
array_push($ret, sprintf(‘<ul class="sub%d">’, $deep));
foreach($children as $clr){
array_push($ret, ‘<li>’);
array_push($ret, $clr['name']);
if( isset($clr['children']) && is_array($clr['children'])){
$ret = array_merge($ret, $this->get_children($clr['children'], $deep+1));
}
array_push($ret, ‘</li>’);
}
array_push($ret, ‘</ul>’);
array_push($ret, sprintf(‘</div>’, $deep) );
return $ret;
}
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>分类</title>
<meta name="keywords" content="">
<style type="text/css">
#cats{
}
#cats li div{
display:none;
}
</style>
<script type="text/javascript">
window.onload = function(){
var cats = document.getElementById(‘cats’),
lis = cats.getElementsByTagName(‘li’);
for(i = 0, len = lis.length; i < len; ++i){
lis[i].click_counter = 0;
(function(index){
lis[index].onclick = function(e){
var div = lis[index].getElementsByTagName(‘div’);
lis[index].click_counter++;
//阻止冒泡,否则会触发父级的click事件
if(e){
e.stopPropagation();
}else{
window.event.cancelBubble = true;
}
if(div.length){
div = div[0];
}else{
return 0;
}
if(div && div.nodeName.toLocaleLowerCase() == ‘div’){
if(lis[index].click_counter & 1){
div.style.display = ‘block';
}else{
div.style.display = ‘none';
}
}
}
}(i));
}
}
</script>
</head>
<body>
<div id="cats">
<?php
$c = new Category($cats);
echo $c->get_tree();
?>
</div>
<!–模板–>
<!–
<ul>
<li>第一级分类</li>
<li>第一级分类
<div>
<ul class="sub1">
<li>第二级分类</li>
<li>第二级分类
<div>
<ul class="sub2">…</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
–>
</body>
</html> Reply
问题我都文件是utf8保存,meta 也是声明为utf-8。
怀疑是这个免费虚拟主机有些什么设置,因为从google code 下的twip 放在上面运行也是乱码。。。 Reply
主机在欧洲,不过不知道为啥html头设了utf8,但老是输出成iso8859-1编码,需要手动设为utf8才能看到中文
twitter:_linqing
不知道百度在广州或深圳有没有职位? Reply