注: 只要你会做了这道题目, 你的能力已经可以进入百度了! 如果别的部门不要你, 请你给我发邮件, 我一定尽我所能强烈推荐你! 如果你不想加入百度, 而别的公司又不要你, 只能说明那家公司瞎眼了.
[图片]
题目: 见图片, 该图是某网页的一个区域的截图, 用于显示商品或者其它信息的分类. 该分类的每一项可以折叠和收起(展开和收缩, 如果有子分类的话). 分类的级数不固定. 现有一个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的

PHP는 동적 웹 개발 및 서버 측 응용 프로그램에 사용되는 서버 측 스크립팅 언어입니다. 1.PHP는 편집이 필요하지 않으며 빠른 발전에 적합한 해석 된 언어입니다. 2. PHP 코드는 HTML에 포함되어 웹 페이지를 쉽게 개발할 수 있습니다. 3. PHP는 서버 측 로직을 처리하고 HTML 출력을 생성하며 사용자 상호 작용 및 데이터 처리를 지원합니다. 4. PHP는 데이터베이스와 상호 작용하고 프로세스 양식 제출 및 서버 측 작업을 실행할 수 있습니다.

PHP는 지난 수십 년 동안 네트워크를 형성했으며 웹 개발에서 계속 중요한 역할을 할 것입니다. 1) PHP는 1994 년에 시작되었으며 MySQL과의 원활한 통합으로 인해 개발자에게 최초의 선택이되었습니다. 2) 핵심 기능에는 동적 컨텐츠 생성 및 데이터베이스와의 통합이 포함되며 웹 사이트를 실시간으로 업데이트하고 맞춤형 방식으로 표시 할 수 있습니다. 3) PHP의 광범위한 응용 및 생태계는 장기적인 영향을 미쳤지 만 버전 업데이트 및 보안 문제에 직면 해 있습니다. 4) PHP7의 출시와 같은 최근 몇 년간의 성능 향상을 통해 현대 언어와 경쟁 할 수 있습니다. 5) 앞으로 PHP는 컨테이너화 및 마이크로 서비스와 같은 새로운 도전을 다루어야하지만 유연성과 활발한 커뮤니티로 인해 적응력이 있습니다.

PHP의 핵심 이점에는 학습 용이성, 강력한 웹 개발 지원, 풍부한 라이브러리 및 프레임 워크, 고성능 및 확장 성, 크로스 플랫폼 호환성 및 비용 효율성이 포함됩니다. 1) 배우고 사용하기 쉽고 초보자에게 적합합니다. 2) 웹 서버와 우수한 통합 및 여러 데이터베이스를 지원합니다. 3) Laravel과 같은 강력한 프레임 워크가 있습니다. 4) 최적화를 통해 고성능을 달성 할 수 있습니다. 5) 여러 운영 체제 지원; 6) 개발 비용을 줄이기위한 오픈 소스.

PHP는 죽지 않았습니다. 1) PHP 커뮤니티는 성능 및 보안 문제를 적극적으로 해결하고 PHP7.x는 성능을 향상시킵니다. 2) PHP는 최신 웹 개발에 적합하며 대규모 웹 사이트에서 널리 사용됩니다. 3) PHP는 배우기 쉽고 서버가 잘 수행되지만 유형 시스템은 정적 언어만큼 엄격하지 않습니다. 4) PHP는 컨텐츠 관리 및 전자 상거래 분야에서 여전히 중요하며 생태계는 계속 발전하고 있습니다. 5) Opcache 및 APC를 통해 성능을 최적화하고 OOP 및 설계 패턴을 사용하여 코드 품질을 향상시킵니다.

PHP와 Python에는 고유 한 장점과 단점이 있으며 선택은 프로젝트 요구 사항에 따라 다릅니다. 1) PHP는 웹 개발, 배우기 쉽고 풍부한 커뮤니티 리소스에 적합하지만 구문은 현대적이지 않으며 성능과 보안에주의를 기울여야합니다. 2) Python은 간결한 구문과 배우기 쉬운 데이터 과학 및 기계 학습에 적합하지만 실행 속도 및 메모리 관리에는 병목 현상이 있습니다.

PHP는 동적 웹 사이트를 구축하는 데 사용되며 해당 핵심 기능에는 다음이 포함됩니다. 1. 데이터베이스와 연결하여 동적 컨텐츠를 생성하고 웹 페이지를 실시간으로 생성합니다. 2. 사용자 상호 작용 및 양식 제출을 처리하고 입력을 확인하고 작업에 응답합니다. 3. 개인화 된 경험을 제공하기 위해 세션 및 사용자 인증을 관리합니다. 4. 성능을 최적화하고 모범 사례를 따라 웹 사이트 효율성 및 보안을 개선하십시오.

PHP는 MySQLI 및 PDO 확장 기능을 사용하여 데이터베이스 작업 및 서버 측 로직 프로세싱에서 상호 작용하고 세션 관리와 같은 기능을 통해 서버 측로 로직을 처리합니다. 1) MySQLI 또는 PDO를 사용하여 데이터베이스에 연결하고 SQL 쿼리를 실행하십시오. 2) 세션 관리 및 기타 기능을 통해 HTTP 요청 및 사용자 상태를 처리합니다. 3) 트랜잭션을 사용하여 데이터베이스 작업의 원자력을 보장하십시오. 4) SQL 주입 방지, 디버깅을 위해 예외 처리 및 폐쇄 연결을 사용하십시오. 5) 인덱싱 및 캐시를 통해 성능을 최적화하고, 읽을 수있는 코드를 작성하고, 오류 처리를 수행하십시오.

PHP에서 전처리 문과 PDO를 사용하면 SQL 주입 공격을 효과적으로 방지 할 수 있습니다. 1) PDO를 사용하여 데이터베이스에 연결하고 오류 모드를 설정하십시오. 2) 준비 방법을 통해 전처리 명세서를 작성하고 자리 표시자를 사용하여 데이터를 전달하고 방법을 실행하십시오. 3) 쿼리 결과를 처리하고 코드의 보안 및 성능을 보장합니다.


핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

mPDF
mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

Atom Editor Mac 버전 다운로드
가장 인기 있는 오픈 소스 편집기

에디트플러스 중국어 크랙 버전
작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

PhpStorm 맥 버전
최신(2018.2.1) 전문 PHP 통합 개발 도구

WebStorm Mac 버전
유용한 JavaScript 개발 도구
