淘宝前端智勇大闯关:相关知识点

quiz-1

昨天在微博看到阿里巴巴校园招聘发了一条微博：淘宝UED前端智勇大闯关”第三季来啦，今晚临时做了一下，倒也挺有意思，涉及挺多知识点，也挺有趣，有兴趣的童鞋可以去试一试。这篇文章，来说一说这次闯关涉及的一些知识点，也当作是分享吧。

第一关.密码解锁

做这种前端相关的题目，chrome或者firefox这种带开发者工具调试台的浏览器是必须的，看源码也是基本技能。第一关直接注释在源码里了，console执行几次命令，右侧就会随机出来三个数字，然后3！=最多6次试一试，就通关了。

第二关：棱镜（难道在黑美帝么）

quiz-2

这关简单，考察css3的rotae属性值，修改一下两个镜子的 left,top 和 -webkit-transform 就好。

第三关：Canvas二维码

展示一堆数字，做这题的时候表示的确是不会，第一次做的时候，就在这里卡住了直接time up game over。

第四关：看图猜东西

quiz-4

给你展示五张logo或者软件截图，有sublime，github，npm，ubuntu balabala平时前端开发涉及得到的软件和网站。

#######第五关：猜房子

quiz-5

我猜出了过程，却没写出代码，555，提示用jquery，这到底思路倒是正确了，通过 $(‘#id’).html() 或者 .txt() 抓去#next-room里的数字，然后获得当前页面的url，修改最后的那个数字。第一次做这题的时候，脑袋短路，没注意到url，view source看了好久每个着落，后来console提示注意url，结果哥还是没看到那room号。思路是对的，查了下jquery的文档，知道了get current page url的几个函数，然后用ajax抓去新界面中的新数字，一直到最后的房间出来为止。

这道题的答案可以参考《淘宝ued – 前端智勇大闯关(第三季)答案》，小提示一下，setTimeOut那个间隔时间没必要设置3秒那么长，直接100毫秒就好了。

做完第五关后，console里提示出下一关的url，我第二次做的时候，提示的url里面是这样的:
的/quiz3/i入口。ndex.php干吧爹！?t=MDdmN好吧，DMyYjhHd懒得DVSd25Wd打字了0VHQmxjU还是FVRRUZDa告诉下一关的地址是ued.campus.alibaba.com/quiz3/i入口。ndex.php干吧爹！?t=MDdmN好吧，DMyYjhHd懒得DVSd25Wd打字了0VHQmxjU还是FVRRUZDa告诉
一堆汉字混在url中，当时想着用正则提取出汉字，结果处理的时候，却提示错误，话说如果遇到这种情况，你会怎么解决呢？后来再做的时候，就直接给出url了。

下面是JQUERY获取当前页面的URL信息的一些函数（摘自《JQUERY获取当前页面的URL信息》）

window.location.pathname
例：http://localhost:8086/topic/index?topicId=361
alert(window.location.pathname); 则输出：/topic/index

设置或获取整个 URL 为字符串。
window.location.href
例：http://localhost:8086/topic/index?topicId=361
alert(window.location.href); 则输出：http://localhost:8086/topic/index?topicId=361

设置或获取与 URL 关联的端口号码。
window.location.port
例：http://localhost:8086/topic/index?topicId=361
alert(window.location.port); 则输出：8086

设置或获取 URL 的协议部分。
window.location.protocol
例：http://localhost:8086/topic/index?topicId=361
alert(window.location.protocol); 则输出：http:

设置或获取 href 属性中在井号“#”后面的分段。
window.location.hash

设置或获取 location 或 URL 的 hostname 和 port 号码。
window.location.host
例：http://localhost:8086/topic/index?topicId=361
alert(window.location.host); 则输出：http:localhost:8086

设置或获取 href 属性中跟在问号后面的部分。
window.location.search
例：http://localhost:8086/topic/index?topicId=361
alert(window.location.search); 则输出：?topicId=361

第六关：没出来

难道因为第五关的答案是我copy直接运行的，当我作弊了，第六关出来还是密码锁 ~ ~ 。

顺便再提示一下，这次闯关倒计时是30分钟，其实，可以自己在console里修改一下时间的。

var _GNow = 1800; //把这个1800改成一个你喜欢的很大很大的数字~ ~就好了。

总的来说，这次闯关主要考察的还是偏js吧，对于我这种js渣来说，压力还是挺大，说多了都是泪，再多说人羞愧，哥写node去了，时间好紧啊，下个月就各种校招了，木什么作品拿出手啊。

本文原文地址罗磊的独立博客<淘宝前端智勇大闯关:相关知识点>