深圳傲冠在線筆試小結

時間 2019-12-07

原文原文鏈接

剛剛作完深圳奧冠軟件的在線筆試題，因爲是在實習公司上班作其餘公司的筆試題，內心總有點放不開，生怕被抓住，好吧，結果作得確實很差~ : ( css

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

1.請實現一個效果，以下圖所示：編程

點擊「start」按鈕時，紅色的小方塊，作勻減速運動，知道速度爲0的時候停下來。這裏須要考慮初始速度和加速度的可能取值，我理解的題意是初始速度v0>0，還有一個爲負的加速度a。固然，若是要想物理學裏面那樣把速度、加速度考慮成一個矢量的話那就更復雜一點了。canvas

下面是我對這個題的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的基礎上加上這個速度的大小，這個大小固然要是一個整數，難道你見過半個像素的偏移麼？:-)spa

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

這個題目我本身理解錯了，覺得能夠用HTML5的拖放屬性，不用去管兼容性，可是我錯了。當我作完事，監考老師告訴我：「同窗，你想得太簡單了」 : ( -【尷尬】，下面這是我作了兼容性以後的代碼：htm

<!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你可要搞懂是嘛意思，別說你不知道。blog

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

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這幾個方法你就能夠把它拿下了，是否是很簡單呢？

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。