深圳傲冠在线笔试小结

刚刚做完深圳奥冠软件的在线笔试题，由于是在实习公司上班做其他公司的笔试题，心里总有点放不开，生怕被抓住，好吧，结果做得确实不好~ : (

其实题目都很简单，基本上都做过，只是隔得太久远都生疏了，看来我很有必要花点时间把这些都来个“温故而知新”。好吧，就废话这么多吧，来看看题目：

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这几个方法你就可以把它拿下了，是不是很简单呢？

好吧，最后来一个总结。傲冠是个好公司，服务态度很不错，做完笔试还悉心的指出你存在的问题，给我的感觉是这个公司的人都很棒，公司应该很有活力！算了，不说多了，估计我是没戏了... 没有好好准备下今天的笔试挺后悔的，斌哥，谢谢你！

深圳傲冠在线笔试小结

推荐阅读