前端智勇大沖關

有關淘寶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);
    }();
})();

 

 

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

有關第四關的解答將在近期整理好了給出，在此請大家耐心等待