深圳傲冠在線筆試小結

剛剛做完深圳奧冠軟件的在線筆試題，由于是在實習公司上班做其他公司的筆試題，心里總有點放不開，生怕被抓住，好吧，結果做得確實不好~ : (

其實題目都很簡單，基本上都做過，只是隔得太久遠都生疏了，看來我很有必要花點時間把這些都來個“溫故而知新”。好吧，就廢話這么多吧，來看看題目：

1.請實現一個效果，如下圖所示：

點擊“start”按鈕時，紅色的小方塊，做勻減速運動，知道速度為0的時候停下來。這里需要考慮初始速度和加速度的可能取值，我理解的題意是初始速度v0>0，還有一個為負的加速度a。當然，如果要想物理學里面那樣把速度、加速度考慮成一個矢量的話那就更復雜一點了。

下面是我對這個題的code:

<!DOCTYPE html>
<html>
<head>
    <title>DIV</title>
    <meta charset="utf-8">
    <style type="text/css">
    #box1{
        position: absolute;
        left: 0;
        top: 0;
        width: 100px;
        height: 100px;
        background-color: red;
    }
    #btn1{
        position: absolute;
        top:120px;
        left:0;
    }
    </style>
    <script>
    /*
        @iSpeed:當前速度
        @a: 加速度
    */
    var oBtn1 = document.getElementById("btn1");
    var iSpeed = 35.33;
    var a = -2.222;
    function startMove(){
        var oBox1 = document.getElementById("box1");
        var time = setInterval(function(){
            iSpeed = iSpeed>0? Math.ceil(iSpeed): Math.floor(iSpeed);
            iSpeed+=a;
            if(iSpeed <= 0){
                clearInterval(time);
            }
            else{
                oBox1.style.left = oBox1.offsetLeft + iSpeed + 'px';
            }
        }, 30);
    }
    
    </script>
</head>
<body>
    <div id="box1">
    </div>
    <input id="btn1" type="button" value="start" onclick = "startMove()">
    
</body>
</html>

上面的iSpeed表示速度，a很顯然就是加速度了。。點擊"start"按鈕后每隔30微妙我調用一次function，直到速度小于等于零的時候才關閉定時器。在這個函數當中，微妙首先對這個速度進行一個取整，因為后面我的要在偏移量oBox1.offsetLeft的基礎上加上這個速度的大小，這個大小當然要是一個整數，難道你見過半個像素的偏移么？:-)

2.一個文本輸入框輸入一條字符串，驗證這個字符串是否是一個合法的郵箱地址，如果是，把旁邊的一個div編程可拖動的！

這個題目我自己理解錯了，以為可以用HTML5的拖放屬性，不用去管兼容性，但是我錯了。當我做完事，監考老師告訴我：“同學，你想得太簡單了” : ( -【尷尬】，下面這是我做了兼容性之后的代碼：

<!DOCTYPE html>
<html>
<head>
    <title>DIV</title>
    <meta charset="utf-8">
    <style type="text/css">
    #box1{
        position: absolute;
        top: 50px;
        left: 100px;
        width: 100px;
        height: 100px;
        background-color: red;
    }
    </style>
    <script>
    function allowDrag(oDiv){
        oDiv.onmousedown = function(ev){
            var oEvent = ev||event;
            var disX = oEvent.clientX - oDiv.offsetLeft;
            var disY = oEvent.clientY - oDiv.offsetTop;

            document.onmousemove = function(ev){
                var oEvent = ev||event;

                oDiv.style.left = oEvent.clientX - disX + 'px';
                oDiv.style.top = oEvent.clientY - disY + 'px';
            };

            document.onmouseup = function(ev){
                document.onmousemove = null;
                document.onmouseup = null;
            }
        }
    
    }
    function check(str){
        var oRule = /^[a-zA-Z0-9]+@(([a-zA-Z0-9]+)[.])+[a-z]{2,4}$/i;
        return oRule.test(str);
    }
    window.onload = function(){
        var oEmail = document.getElementById("email");
        var oBox1 = document.getElementById("box1");
        
        oEmail.onblur = function(){
            var string = oEmail.value;
            if(check(string)){
                allowDrag(oBox1);
            }
        }
    }
    </script>
</head>
<body>
    <input id="email" type="text">
    <div id="box1"></div>
    
</body>
</html>

邏輯非常簡單，首先用正則來驗證郵箱（這里驗證郵箱我沒有考慮下劃線，后來想想這個東西還是加上去比較靠譜，要是你的BOSS討厭那些不支持下劃線郵箱你就慘了），如果驗證通過，那么調用allowDrag函數，通過mousedown里面嵌入mousemove,mouseup來實現拖放效果。這里的clientX,clientY還有offsetLeft, offsetTop你可要搞懂是嘛意思，別說你不知道。

3.用HTML5 canvas實現一個小畫板

OMG~ 玩過一點HTML5的同學我相信你們都實現過這個吧！

<!DOCTYPE html>
<html>
<head>
    <title>DIV</title>
    <meta charset="utf-8">
    <style type="text/css">
    body{ background : gray;}
    #c1{background: white;}
    </style>
    <script>
    window.onload = function(){
        var oC = document.getElementById("c1");
        
        var oGC = oC.getContext('2d');

        oC.onmousedown = function(ev){
            var ev = ev || window.event;
            oGC.moveTo(ev.clientX - oC.offsetLeft, ev.clientY - oC.offsetTop);

            document.onmousemove = function(ev){
                var ev = ev || window.event;
                oGC.lineTo(ev.clientX - oC.offsetLeft, ev.clientY - oC.offsetTop);
                oGC.stroke();
            }
            document.onmouseup = function(){
                document.onmousemove = null;
                document.onmouseup = null;
            }

        };
        
    }
    </script>
</head>
<body>
    <canvas id="c1" width="400" height = "400">
    </canvas>
</body>
</html>

在第二題的基礎上，只要你懂moveTo, lineTo和stroke這幾個方法你就可以把它拿下了，是不是很簡單呢？

好吧，最后來一個總結。傲冠是個好公司，服務態度很不錯，做完筆試還悉心的指出你存在的問題，給我的感覺是這個公司的人都很棒，公司應該很有活力！算了，不說多了，估計我是沒戲了... 沒有好好準備下今天的筆試挺后悔的，斌哥，謝謝你！

posted @ 2013-10-30 17:00 CodingMonkey 閱讀(1061) 評論(4) 收藏舉報

刷新頁面返回頂部

MockingBird

活著，是一場修行

深圳傲冠在線筆試小結

公告

MockingBird

活著， 是一場修行

深圳傲冠在線筆試小結

公告

活著，是一場修行