前端智勇大冲关

有关淘宝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);
    }();
})();

第四关：主要考查的是算法应用，很有趣

有关第四关的解答将在近期整理好了给出，在此请大家耐心等待