有关淘宝ued前端智勇大冲关的解答
一、先给出每一关的地址
第一关：http://ued.taobao.com/quiz/index.php
第二关：http://ued.taobao.com/quiz/?ZzCMnTucu2VlfOC2xqrWQL4FY20
第三关：http://ued.taobao.com/quiz/?PGKPkziU7DRlfOC2xqrWQbMOY2w
第四关：http://ued.taobao.com/quiz/?PDSLnWnHvWplfOC2xqrWRLIFY2o
二、分析每一关的解答
第一关：考察css问题，考点在于字体颜色与背景颜色一样。
查看源代码，便可以发现。
第二关：考察javascript中数组和字符串。
a="hostname,test,value,input,getElementsByTagName,nextQuiz,23805,http,protocol,location,reverse,join,split,
w2YEQLRWrqx2COflRz6HjzkYXTa?/ziuq/moc.oaboat.deu//:ptth,GET,...".split(",");
this[a[5]]=a[13][a[12]]("")[a[10]]()[a[11]]("");
==>a[13]["split"]("")["reverse"]()["join"]("");
==>"w2YEQLRWrqx2COflRz6HjzkYXTa?/ziuq/moc.oaboat.deu//:ptth"["split"]("")["reverse"]()["join"]("");
==>"w2YEQLRWrqx2COflRz6HjzkYXTa?/ziuq/moc.oaboat.deu//:ptth".split("").reverse().join("");
第三关：考察javascript与css应用
把答案写在button按钮value的值上o2YFILRWrqx2COflpWvHnWnLSDP?/ziuq/moc.oaboat.deu//:ptth，这个按钮被display;none
可以把这段字符串加密处理下，放在cssTest.js中
把按钮给出来，填写样式属性。
例如：position: absolute; left: 480px; top: 150px;
原理：碰撞检测
以前写的一个关于《碰撞检测》
下面是cssTest.js源码
(function(){ var rectangle = $('#balloon'), newCSS = $('#newCSS'), rectanglePosition = rectangle.position(), rectangleWidth = rectangle.width(), rectangleHeight = rectangle.height(), isEnter = false, radius = 90, centerOfBalloon, //获取钉头的坐标 getPinPosition = function(el){ var width = el.width(), height = el.height(), position = el.position(), marginLeft=parseFloat(el.css('marginLeft')), marginTop = parseFloat(el.css('marginTop')); return { left : position.left+marginLeft+width, top : position.top+marginTop+height } }, //获取气球圆心位置 getCenterOfBalloon = function(){ var top = rectanglePosition.top+radius, left = rectanglePosition.left+rectangleWidth/2; return{ left : left, top : top } }, isPinInBalloon = function(pinPosition){ //console.info(Math.sqrt(Math.pow((centerOfBalloon.left-pinPosition.left),2)+Math.pow((centerOfBalloon.top-pinPosition.top),2))); return Math.sqrt(Math.pow((centerOfBalloon.left-pinPosition.left),2)+Math.pow((centerOfBalloon.top-pinPosition.top),2))<=radius; }, checkPosition = function(e){ var pin= $(this), pinPosition = getPinPosition(pin); if(isPinInBalloon(pinPosition)){ if(!isEnter){ pin.triggerHandler('enter'); } isEnter = true; } else{ isEnter = false; } }, parseInput = function(value){ var s = value.replace(/\n/g, ';').replace(/\s/g, ''), a = s.split(';'), item, k, ret = {}; for(var i=0,l=a.length;i<l;i++){ item = a[i]; if(!item){ continue; } k = item.split(':'); ret[k[0]] = k[1]; } return ret; }, movePin= function(pin,o){ pin.css(parseInput(newCSS.val())); pin.triggerHandler('move'); }, //爆 bang = function(){ setTimeout(function () { rectangle.css("background-position", "-176px 50%"); }, 500); setTimeout(function () { rectangle.css("background-position", "-352px 50%"); }, 1000); setTimeout(function () { rectangle.css("background-position", "-528px 50%"); }, 1500); setTimeout(function () { rectangle.css("background-position", "-704px 50%"); }, 2000); setTimeout(function () { $("#platform .pin").fadeOut(); rectangle.fadeOut(function () { var val = $('#test').val().split('').reverse().join('').substr(7); $("#suc").html(val).fadeIn(); }); }, 2500); }, init = function(){ var pin= $('#pin'); centerOfBalloon = getCenterOfBalloon(); pin.on('enter',bang); newCSS.on('keyup',function(){ movePin(pin,parseInput(newCSS.val())); }); pin.on('move',checkPosition); }(); })();
第四关：主要考查的是算法应用，很有趣
有关第四关的解答将在近期整理好了给出，在此请大家耐心等待
