淘宝ued 淘宝ued团队博客

下午在微博上看到了淘宝智勇大闯关第三季的信息,感觉挺有意思的,于是就尝试做了下。附上题目地址:

http://ued.campus.alibaba.com/quiz3/index.php

也可到独立博客查看:前端智勇大闯关(第三季)答案

第1题 突破,带锁的门

方法1

这题相对比较简单,查看源码即可看到提示信息:



1 <!--2 -====================================3 - 调用powder.blow()显示指纹痕迹!4 -====================================5 -->

只要在控制台里多次调用powder.blow()函数即可看到图片上的指纹信息。然后尝试组合这几个数便可过关。如下图所示:



方法2

另一种比较简单的方法就是加断点监控pwd的值,如下图所示,答案就是数组里的三个数字:



第2题 激光,前进的方向

这题主要考察css3的transform属性,首先在右下角的灰色小块(#ma)上添加样式,然后调整top值,最终样式如下:



1 #ma {2 top: 549px;3 left: 960px;4 -webkit-transform: rotate(-82deg); 5 }

然后会看到界面中又多了一个黑点,再调整左上方的灰色小块(#mb),调整方法同上,最终样式为:



1 #mb {2 left: 550px;3 top: 425px;4 -webkit-transform: rotate(169deg);5 }

最终结果如下图,即可过关。



第3题 坐标,隐藏的线索

这题主要考察canvas绘图,查看源码时,页面中会有提示信息(一大串数字),这些数字其实就是绘制坐标。



var str = "0,0,12,12 12,0,12,12 24,0,12,12 36,0,12,12 48,0,12,12 60,0,12,12 72,0,12,12 120,0,12,12 132,0,12,12 144,0,12,12 168,0,12,12 180,0,12,12 192,0,12,12 204,0,12,12 216,0,12,12 228,0,12,12 240,0,12,12 0,12,12,12 72,12,12,12 96,12,12,12 108,12,12,12 120,12,12,12 144,12,12,12 168,12,12,12 240,12,12,12 0,24,12,12 24,24,12,12 36,24,12,12 48,24,12,12 72,24,12,12 120,24,12,12 132,24,12,12 144,24,12,12 168,24,12,12 192,24,12,12 204,24,12,12 216,24,12,12 240,24,12,12 0,36,12,12 24,36,12,12 36,36,12,12 48,36,12,12 72,36,12,12 96,36,12,12 108,36,12,12 144,36,12,12 168,36,12,12 192,36,12,12 204,36,12,12 216,36,12,12 240,36,12,12 0,48,12,12 24,48,12,12 36,48,12,12 48,48,12,12 72,48,12,12 108,48,12,12 144,48,12,12 168,48,12,12 192,48,12,12 204,48,12,12 216,48,12,12 240,48,12,12 0,60,12,12 72,60,12,12 96,60,12,12 132,60,12,12 168,60,12,12 240,60,12,12 0,72,12,12 12,72,12,12 24,72,12,12 36,72,12,12 48,72,12,12 60,72,12,12 72,72,12,12 96,72,12,12 120,72,12,12 144,72,12,12 168,72,12,12 180,72,12,12 192,72,12,12 204,72,12,12 216,72,12,12 228,72,12,12 240,72,12,12 108,84,12,12 0,96,12,12 12,96,12,12 24,96,12,12 36,96,12,12 48,96,12,12 72,96,12,12 84,96,12,12 96,96,12,12 132,96,12,12 156,96,12,12 180,96,12,12 204,96,12,12 228,96,12,12 0,108,12,12 24,108,12,12 36,108,12,12 60,108,12,12 120,108,12,12 132,108,12,12 144,108,12,12 156,108,12,12 168,108,12,12 216,108,12,12 240,108,12,12 12,120,12,12 36,120,12,12 48,120,12,12 60,120,12,12 72,120,12,12 84,120,12,12 108,120,12,12 120,120,12,12 144,120,12,12 168,120,12,12 180,120,12,12 228,120,12,12 24,132,12,12 36,132,12,12 60,132,12,12 84,132,12,12 96,132,12,12 108,132,12,12 120,132,12,12 132,132,12,12 144,132,12,12 156,132,12,12 168,132,12,12 204,132,12,12 216,132,12,12 0,144,12,12 12,144,12,12 24,144,12,12 48,144,12,12 72,144,12,12 84,144,12,12 96,144,12,12 108,144,12,12 144,144,12,12 180,144,12,12 204,144,12,12 228,144,12,12 96,156,12,12 108,156,12,12 120,156,12,12 144,156,12,12 180,156,12,12 204,156,12,12 216,156,12,12 228,156,12,12 240,156,12,12 0,168,12,12 12,168,12,12 24,168,12,12 36,168,12,12 48,168,12,12 60,168,12,12 72,168,12,12 96,168,12,12 108,168,12,12 120,168,12,12 132,168,12,12 156,168,12,12 192,168,12,12 204,168,12,12 216,168,12,12 228,168,12,12 0,180,12,12 72,180,12,12 108,180,12,12 180,180,12,12 192,180,12,12 204,180,12,12 216,180,12,12 228,180,12,12 0,192,12,12 24,192,12,12 36,192,12,12 48,192,12,12 72,192,12,12 96,192,12,12 108,192,12,12 120,192,12,12 132,192,12,12 156,192,12,12 192,192,12,12 228,192,12,12 0,204,12,12 24,204,12,12 36,204,12,12 48,204,12,12 72,204,12,12 96,204,12,12 120,204,12,12 132,204,12,12 144,204,12,12 156,204,12,12 168,204,12,12 180,204,12,12 204,204,12,12 216,204,12,12 0,216,12,12 24,216,12,12 36,216,12,12 48,216,12,12 72,216,12,12 96,216,12,12 144,216,12,12 168,216,12,12 180,216,12,12 204,216,12,12 216,216,12,12 0,228,12,12 72,228,12,12 96,228,12,12 132,228,12,12 144,228,12,12 156,228,12,12 168,228,12,12 180,228,12,12 204,228,12,12 216,228,12,12 0,240,12,12 12,240,12,12 24,240,12,12 36,240,12,12 48,240,12,12 60,240,12,12 72,240,12,12 96,240,12,12 108,240,12,12 120,240,12,12 144,240,12,12 228,240,12,12"var arr = str.split(" ");var drawing = document.getElementById('qr-canvas');var context = drawing.getContext('2d');context.fillStyle = "#000";for(var i = 0; i < arr.length; i++){ var tmp = arr[i].split(','); context.fillRect(tmp[0],tmp[1],tmp[2],tmp[3]);}

把页面中的数字信息放入上面代码中的字符串str中,然后将代码复制到控制台执行即可过关。



第4题 图案,疯狂的猜测

第四题考察的知识面比较广,每个人的题目可能也不一样。答案涉及到:



1 操作系统: ubuntu 2 管理器: npm 3 开源程序名: wordpress 4 IDE: sublime 5 ps快捷键: v 6 网址:stackoverflow.com 还有一个是 w3.org 7 淘宝图标方案:sprite 8 圆形图案(标记语言): php 9 模版语言: Jade10 样式语言: less11 前端库(.zip...): underscore

第5题 寻找,无尽的房间

方法一

最简答的方法就是用NEXT ROOM中的数字替换地址栏中&room= 中的数字,然后把每次的#message信息积累下来。这算是一个本办法吧,但可以过关。

方法二

但是控制台中有提示信息:



jQuery is ready for you.

于是可以用jQuery通过ajax来请求,最后获得下一关的地址,代码如下



(function(){ var str = ''; var startRoom = $("#next-room").text(); getMessage(startRoom); function getMessage(room){ $.ajax({ url: location.pathname + location.search.replace(/room=d+/, 'room=' + room), dataType: 'html', type: 'get', success: function(res) { var nextRoom = $("#next-room", $(res)).text(); if (nextRoom) { str += $("#message", $(res)).text(); console.log("正在进入" + nextRoom + "号房间,请稍候..."); setTimeout(function() { getMessage(nextRoom); }, 3000); }else{ str += $("#message", $(res)).text(); console.log('完整的message信息是:' + str); console.log('下一关的地址是' + location.host + str.substring(str.indexOf('/'))); } } }); }})()

截图如下:



第6题 消除! 最后的任务

控制台输入:

淘宝ued 淘宝ued团队博客


var t=KISSY;e=t.DOM;window.location=Base64.decode(e.attr("#page","data-p"));

上面只是自己做的结果,大家有好的答案的话欢迎补充。

  

爱华网本文地址 » http://www.aihuau.com/a/25101013/173032.html

更多阅读

张立宪——博客是我的情报站(10.10.8) 张立宪油画

博主名片:张立宪,图书编辑,网名见招拆招。参与创办《足球之夜》、《生活资讯》等杂志。曾任现代出版社副总编辑,策划有《大话西游宝典》、《独立精神》、《昨日艺术》等图书。出版有个人著作《闪开,让我歌唱八十年代》。现主编《读库》丛

声明:《淘宝ued 淘宝ued团队博客》为网友碎花控分享!如侵犯到您的合法权益请联系我们删除